今天介绍一种常见的显示新闻、欢迎词的特效--走马灯，一行行文字由下往上滚动，鼠标移动到文字上，就会停止滚动，比较适合用在公告栏里。具体效果见这里。
它的实现非常简单，一个js一个css就可以了，下面就看怎么实现吧！
实现方法
1：备份模板
2：在<head></head>间添加下列代码，以引用脚本文件（其中的脚本文件建议自己保存并上传到自己的网络硬盘里）<script src='http://bryant0315.googlepages.com/marquee.js' type='text/javascript'/>
3：添加下面的CSS到 ]]></b:skin> 之前#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
4：保存模版
5：在页面元素里，添加一个HTML/Java Script，内容是<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">6：保存
<div id="vmarquee" style="position: absolute; width: 98%;">
<!--YOUR SCROLL CONTENT HERE-->
Your scroller contents
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
说明
1：那个CSS：marqueecontainer的样式可以自己定义，做一个自己喜欢的。
2：Your scroller contents是走马灯的内容，自己定义。
现在预览一下，看怎么样？
CSS精彩实例(二)——Cross Browser marquee
|
标签：
CSS
|
订阅：
博文评论 (Atom)
0 评论:
发表评论