越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

教程 | Marquee Effect

话说,好几天没有更新教材了。不要问我为什么,我只会回答你一样的答案 - 懒惰 /v\ 每天都窝在四只猪锝窝里,跟另外三只猪在聊天。趁着今天那三只猪不得空上线,我赶紧来更新教程一下下 ♥ 这篇 Marquee Effect 是从旧教程区搬过来的。如果没有看过的童鞋,可以学学这个教程哦。这个教程很好用的,可以根据你自己的喜欢,用在任何地方的说 :]


- Tutorial requested by Ley Ting -

Blog Template User
1. 布局 - 添加小工具 - HTML/JavaScript

2. 把你要的 marquee effect 代码添加进去

Blogskin User
1. 模板

2. 把你要的 marquee effect 代码添加在你的 sidebar 代码里

# 效果 1 - 文字向上 / 向下移动

大家好。这是范例,不是饭粒


<marquee  behavior="scroll" direction="up / down" height="75px">内容</marquee>

# 效果 2 - 文字向左 / 向右移动

大家好。这是范例,不是饭粒


<marquee  behavior="scroll" direction="left / right" width="225px">内容</marquee>

# 效果 3 - 图片 Marquee Effect



<marquee  behavior="scroll" direction="left / right / up / down" height="75px" width="225px"><img src="图片网址"></marquee>

# 效果 4 - 图片 + 文字 Marquee Effect

大家好。这是范例,不是饭粒


<marquee  behavior="scroll" direction="left / right / up / down" height="75px" width="225px"><img src="图片网址"> 文字内容</marquee>

# 效果 5 - 有背景的 Marquee Effect

大家好。这是范例,不是饭粒


<marquee  behavior="scroll" direction="left / right / up / down" height="75px" width="225px" style="background: url(背景网址);">内容</marquee>

# 效果 6 - 鼠标指着时,停止 Marquee Effect

大家好。这是范例,不是饭粒


<marquee behavior="scroll" direction="left / right / up / down" height="75px" width="225px" onmouseout="this.start()" onmouseover="this.stop()"></marquee>


小解释
红色代码:选择一个 direction, 删掉剩下的
蓝色代码:Marquee 内容的高度 / 宽度
紫色代码:图片 / 背景网址

# 内容不仅限于文本 / 图片。任何小工具(链接 / 播放器 / 状态等)都可以自己添加的哟 :)

其实 Marquee 效果是个很容易明白的效果来的。大家其实还可以选择自己喜欢的美化代码添加进去的哟 ^-^ 以上给的例子只是基本的而已,更深入复杂的代码 / 效果,大家可以自己去研究的嗯。

9 comments:

  1. 成功了 :) 谢谢博主的教程嗯 XD

    ReplyDelete
  2. 请问要怎样分开呀?
    好想你的示范图酱的...

    ReplyDelete
    Replies
    1. 你要分开什么 ? sidebar 分开还是分段落的意思 ?

      -replied by Bii.

      Delete
  3. 謝謝蛤 :D
    教會我這個部落格白癡 XD

    ReplyDelete
  4. 感謝版主教的東西非常實用喲<3
    真的很喜歡w
    謝謝w

    ReplyDelete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。