仿拼多多拼单 向上无缝滚动
七娃博客1,749人阅读
网上有很多无缝滚动的插件,在这推荐一下我经常使用的jquery无缝向上滚动的插件:
css直接省略了,自己写吧!
html部分:class名字改的话把js第一行的也修改了!
<div class="myscroll"> <ul> <li>商品列表</li> <li>商品列表</li> <li>商品列表</li> </ul> </div>
js部分:
var $this = $(".myscroll"); var scrollTimer; $this.hover(function() { clearInterval(scrollTimer); }, function() { scrollTimer = setInterval(function() { scrollNews($this); }, 2000); }).trigger("mouseout"); function scrollNews(obj) { var $self = obj.find("ul:first"); var lineHeight = $self.find("li:first").height(); $self.animate({ "margin-top": -lineHeight + "px", "opacity": "0.5" }, 600, function() { $self.css({ "margin-top": "0px", "opacity": "1" }).find("li:first").appendTo($self); }) }
然后就可以了实现滚动了,不过父级盒子要设高度,溢出隐藏,内容高度大于父级盒子高度,才会滚动哦!
[…] 之前整理过一篇类似的无缝滚动的插件《js实现无缝滚动》和《仿拼多多拼单 向上无缝滚动》,都是类似的效果,列表无缝向上滚动,今天再记录一个笔记,觉得这个更适合纯文字列表的无缝滚动情况,例如:政府机构的滚动新闻列表,培训机构的考试时间列表… 废话不多逼叨,直接看效果,上代码! […]