标签：
在网站上我们常看到有滚动的文字或者图片，比如消息提醒，新闻列表，等等。那么这些效果是怎么形成的呢？经过查阅，找到一种十分方便的写法，经过改良，得出我自己的终极版滚动效果。
我先写个布局吧
<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了噢
标签：
原文地址：http://www.cnblogs.com/chentongtong/p/5505887.html
