淘宝头条滚动信息组件一键get

2019-04-18

             匕

仿淘宝滚动头条代码

作者 | 创客云

           阝                   

                              廴              匚

有一些做社区的站长,想要在首页更新新闻动态或者是活动信息,但是又没有现成的模板,怎么办?


机智的站长创客云写了一套仿淘宝滚动头条的代码,结合文章组件,显示动态的信息!

厉害了我的站长!


效果图:


首先,页面添加一个文章列表组件,
注意,文章列表样式要选这个:

文章显示条数不要选:不限



然后添加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); 
}) 
} 


Q
&
A

淘宝头条的图片怎么修改?

在背景图片地址中替换你想要的图片,注意图片不要过大。


售前咨询:0594-6688668 快站建设logo

Copyright By © 2019 isohu.top