在网站上我们常看到有滚动的文字或者图片,比如消息提醒,新闻列表,等等。那么这些效果是怎么形成的呢?经过查阅,找到一种十分方便的写法,经过改良,得出我自己的终极版滚动效果。
我先写个布局吧
<div class="scrollBox"> <ul> <li>母鸡母鸡母鸡母鸡</li> <li>DUCKDUCKDUCK</li> <li>母鸡母鸡母鸡母鸡</li> <li>母鸡母鸡母鸡母鸡</li> <li>DUCKDUCKDUCK</li> <li>母鸡母鸡母鸡母鸡</li> <li>DUCKDUCKDUCK</li> <li>母鸡母鸡母鸡母鸡</li> <li>DUCKDUCKDUCK</li> </ul> </div>
正规且常见的布局。当然li标签里的内容根据项目需要进行修改,都是不影响效果的实现的,你可以加个图片或者图片文字都有的状态,例如
要想实现滚动,样式上需要注意以下几点
1.最外面的div要有具体的高度。
2.最外面的div必须加上overflow:hidden
3.因为是获取li标签的高度作为向上滚动的距离,所以li标签的样式里最好不要有padding或者margin,如果效果冲突的话可以在li标签里加个a标签,样式写在a标签里
下面是核心部分
<script> function autoScroll(obj){ var n=$(obj).find("li").height(); $(obj).find("ul").animate({ marginTop:-n },500,function(){ $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); }) $(function(){ setInterval('autoScroll(".scrollBox")',3000) }) } </script>
这样写代码的复用性比较强,在$(function(){})里面可以加入多条语句,从而实现页面多处滚动的效果。
对了,千万不要在页面中引入jquery了噢