甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

网站前端制作之列表无缝滚动

在门头沟等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供做网站、成都网站建设 网站设计制作按需网站建设,公司网站建设,企业网站建设,品牌网站建设,成都营销网站建设,成都外贸网站制作,门头沟网站建设费用合理。

>列表无缝滚动和列表可切换的无缝滚动，如下图:

Css如下所示:

Html如下所示:


Js如下所示:
scrollUpDown($('#donation_list'));
functionscrollUpDown(obj){
var_height=obj.outerHeight();
var_html=obj.find('#donation_listul').html();
obj.find('#donation_listul').html(_html);
functionscroll(){
returnsetInterval(function(){
if(parseFloat(obj.css('margin-top'))>-(_height)){
obj.css({'margin-top':parseFloat(obj.css('margin-top'))-1});
}else{
obj.css({'margin-top':0});
}
},60);
}
var_interval=scroll();
obj.hover(function(){
_interval=clearInterval(_interval);
},function(){
_interval=scroll();
});
}

如果是要能切换的无缝对接，就如下所示：

Css如下所示：

Html如下所示：

Js如下所示：
~(function($,window,document,undefined){
classScroll{
constructor(eles,opts){
this.$eles=eles;
opts=opts||{};
this.defaults={
mode:'CSS',
cssSpeed:5,
jsSpeed:'normal',
};
this.options=$.extend(true,{},this.defaults,opts);
this.options.jsSpeed=this.handleJsSpeed(this.options.jsSpeed);
this.init();
}
init(){
this.handleEve();
}
handleJsSpeed(sp){
switch(sp){
case'slow':
return50;
case'normal':
return30;
case'fast':
return15;
}
}
handleEve(){
const_this=this;
this.$eles.each(function(i,domEle){
_this.cloneNode(domEle);
_this.initValue(domEle);
_this.wrapDiv(domEle);
_this.createKeyframes();
if(_this.options.mode==='CSS'){
_this.moveByCss(domEle);
_this.handleHoverByCss(domEle);
}else{
_this.moveByJs(domEle);
_this.handleHoverByJs(domEle);
}
});
}
cloneNode(ele){
$(ele).children().clone().appendTo($(ele));
}
initValue(ele){
$(ele).css({
margin:0,
padding:0
});
ele.num=0;
consto=$(ele).parents(":hidden").eq($(ele).parents(":hidden").length-1);
o.css({
display:'block'
});
//ele.h=parseInt($(ele).outerHeight(true)/2);
//Topreventthefathersettingdisplay:flex;fromaffectingtheheightofthechildelement
letsum=0;
$(ele).children().each(function(i,item){
sum+=$(item).outerHeight(true);
});
ele.h=parseInt(sum/2);
o.css({
display:'none'
});
}
wrapDiv(ele){
$(ele).wrap($(``));
}
createKeyframes(){
construnkeyframes=`@keyframesIFER_MOVE{
100%{
transform:translateY(-50%);
}
}`;
conststyle=document.createElement('style');
style.type='text/css';
style.innerHTML=runkeyframes;
document.querySelector('head').appendChild(style);
}
moveByCss(ele){
$(ele).css({
animation:`IFER_MOVE${this.options.cssSpeed}slinearinfinite`
});
}
handleHoverByCss(ele){
$(ele).hover(function(){
$(this).css('animation-play-state','paused');
},function(){
$(this).css('animation-play-state','running');
});
}
moveByJs(ele){
clearInterval(ele.timer);
ele.timer=setInterval(()=>{
if(Math.abs(ele.num)===ele.h){
ele.num=0;
}else{
$(ele).css('transform','translateY('+ele.num+'px)');
}
ele.num--;
},this.options.jsSpeed);
}
handleHoverByJs(ele){
const_this=this;
$(ele).hover(function(){
clearInterval(ele.timer);
},function(){
_this.moveByJs(ele);
});
}
}
$.fn.siScroll=function(options){
newScroll(this,options);
};
})(jQuery,window,document);

$('.list-titleli').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.content').eq($(this).index()).show().siblings('.content').hide();
});

$(".scroll").siScroll();
网站题目：网站前端制作之列表无缝滚动
文章URL：http://chengdu.cdxwcx.cn/article/eigesh.html

其他资讯