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

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



Css如下所示:
<style>
*{
margin:0;
padding:0;
}

li{
list-style:none;
}

.donation_list.box{
margin-top:20px;
height:330px;
overflow:hidden;
background:#F5F5F5;
}
#donation_list{
max-width:360px;
margin-left:auto;
margin-right:auto;
}
.donation_listulli{
padding:15px0px;
color:#777777;
font-size:16px;
line-height:1.7;
border-bottom:dashed#f1f1f11px;
overflow:hidden;
}
.donation_listulli.date,
.donation_listulli.name,
.donation_listulli.sum{
float:left;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.donation_listulli.date{
width:100px;
}
.donation_listulli.sum{
width:110px;
text-align:right;
}
.donation_listulli.name{
width:-moz-calc(100%-210px);
width:-webkit-calc(100%-210px);
width:calc(100%-210px);
text-align:center;
}
</style>
Html如下所示:

<scriptsrc="js/jquery-1.11.1.min.js"></script>
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如下所示：
<style>
*{
margin:0;
padding:0;
}

li{
list-style:none;
}

.list-wrap{
margin:50pxauto0;
width:500px;
vertical-align:top;
border:1pxsolidrgb(219,219,219);
box-shadow:rgb(164,160,157)1px1px9px-3px;
background-color:#F5F5F5;
}

.list-title{
display:flex;
border-bottom:2pxsolid#182248;
height:60px;
line-height:40px;
}

.list-titleli{
text-align:center;
flex:111px;
cursor:pointer;
padding:10px30px;
color:rgb(51,51,51);
}

.list-titleli.active{
color:#fff;
background-color:#182248;
}

.list-con{
padding:20px;
}

.list-con.content{
display:none;
padding:20px;
background-color:#fff;
}

.list-con.contentli{
font-size:12px;
height:30px;
line-height:30px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.list-con.contentli.date,
.list-con.contentli.name,
.list-con.contentli.sum{
float:left;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.list-con.contentli.date{
width:100px;
}
.list-con.contentli.sum{
width:110px;
text-align:right;
}
.list-con.contentli.name{
width:-moz-calc(100%-210px);
width:-webkit-calc(100%-210px);
width:calc(100%-210px);
text-align:center;
}
</style>
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($(`<divstyle="height:${ele.h}px;overflow:hidden;padding:0">`));
}
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();