当前位置: 编程技术>jquery
Jquery文字逐行向上滚动的实现代码
来源: 互联网 发布时间：2014-09-03
本文导语: 基本原理：运用了一个小技巧，滚动的高度和每个li的高度一样的，先找到外层ul的容器，然后相对于外层的容器进行向上滚动，ul在css里面没有设置他的高度，默认情况下是n个li×li的高度 向上是marginTop： -li.height(每个li的高度)...
基本原理：运用了一个小技巧，滚动的高度和每个li的高度一样的，先找到外层ul的容器，然后相对于外层的容器进行向上滚动，ul在css里面没有设置他的高度，默认情况下是n个li×li的高度 向上是marginTop： -li.height(每个li的高度);
* 当滚动到最后一个li时，最外层的容器应该滚动到0了，就把第一个li加到ul中去，便可以实现循环滚动。
* 而不会滚动到最后一个就停止。
代码：
代码示例:
Jquery文字一行一行向上滚动-www.
ul,li{list-style:none; margin:0; padding:0;}
.scroll{ width:500px; height:175px; overflow:hidden; border:1px solid #333; margin:50px auto 0;}
.scroll li{ width:500px; height:25px; line-height:25px; overflow:hidden;}
.scroll li a{ font-size:14px; font-family:"宋体";color:#333; text-decoration:none;}
.scroll li a:hover{ text-decoration:underline;}
- 脚本学堂，提供丰富的脚本编程、网站编程、数据库等技术文章。
- ，提供丰富的脚本编程、网站编程、数据库等技术文章。
- ，提供丰富的脚本编程、网站编程、数据库等技术文章。
- ，提供丰富的脚本编程、网站编程、数据库等技术文章。
- ，提供丰富的脚本编程、网站编程、数据库等技术文章。
- ，提供丰富的脚本编程、网站编程、数据库等技术文章。
- ，提供丰富的脚本编程、网站编程、数据库等技术文章。
2，js代码部分
代码示例:
/**
* 文字逐行向上滚动
* edit:www.
*/
function autoScroll(obj){
$(obj).find(".list").animate({
marginTop : "-25px"
},500,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
})
}
$(function(){
setInterval('autoScroll(".scroll")',3000)
})
* 文字逐行向上滚动
* edit:www.
*/
function autoScroll(obj){
$(obj).find(".list").animate({
marginTop : "-25px"
},500,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
})
}
$(function(){
setInterval('autoScroll(".scroll")',3000)
})
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。