淘宝头条滚动信息组件一键get
力 匕
仿淘宝滚动头条代码
作者 | 创客云
阝 勹
廴 匚
有一些做社区的站长，想要在首页更新新闻动态或者是活动信息，但是又没有现成的模板，怎么办？ 机智的站长创客云写了一套仿淘宝滚动头条的代码，结合文章组件，显示动态的信息！ 厉害了我的站长！ 效果图： 首先，页面添加一个文章列表组件， 文章显示条数不要选：不限 然后添加js组件，复制下面的代码到js 组件内。 淘宝头条的图片怎么修改？ 在背景图片地址中替换你想要的图片，注意图片不要过大。
注意，文章列表样式要选这个：
代码如下（前方代码高能）：
$(function(){
var $this = $(".mod-pictxt4");
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" },600 , function(){
$self.css({"margin-top":"0px"}).find("li:first").appendTo($self);
})
}
