网站前端制作之列表无缝滚动
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();
当前标题：网站前端制作之列表无缝滚动
文章位置：http://myzitong.com/article/eigesh.html