分享兩個(gè)無(wú)縫滾動(dòng)的例子，第一個(gè)比較全面畦戒，可以設(shè)置一下效果方库，具體大家配置就可以，第二個(gè)比較死板
有延遲停留的加載障斋，并且一行一樣的滾動(dòng)
var atea=document.getElementById("box");
var iLiHeight=24;//滾動(dòng)高度
area.innerHTML+=atea.innerHTML;//重新創(chuàng)建一個(gè)滾動(dòng)替代
var speed=50;
var delay=2000;
var time=null;
function startMove( ){
atea.scrollTop++;
time=setInterVal("scrollUp()",speed);
}
function scrollUp(){
if(area.scrollTop%iLiHeight==0){ //剛好滿足一次滾動(dòng)高度纵潦，就停止一下，在滾動(dòng)
clearInterVal(time);
setTimeOut("startMove()",delay);
}else{
area.scrollTop++;
if(area.scrollTop>=area.scrollHeight/2){
atea.scrollTop=0;
}
}
}
setTimeOut("startMove()",2000)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-2.1.4.min.js" type="text/javascript"></script>
<style>
*{
padding: 0;
margin: 0;
}
#box{
position: relative;
left: 50px;
top: 50px;
width: 300px;
height: 200px;
border: 1px solid grey;
overflow: hidden;
}
#out{
border: 1px solid grey;
position: relative;
left: 50px;
top: 50px;
width: 300px;
height: 150px;
overflow:hidden;
}
li{
border: 1px solid red;
background-color: grey;
}
</style>
</head>
<body>
<div id="out">
<ul id="inner">
<li >1 A really ironic artisan </li>
<li >2 A really ironic artisan </li>
<li >3 A really ironic artisan </li>
<li >4 A really ironic artisan </li>
<li >5 A really ironic artisan </li>
<li >6 A really ironic artisan </li>
<li >7 A really ironic artisan </li>
<li >8 A really ironic artisan </li>
<li >9 A really ironic artisan </li>
<li >10 A really ironic artisan </li>
</ul>
<ul >
<li >1 A really ironic artisan </li>
<li >2 A really ironic artisan </li>
<li >3 A really ironic artisan </li>
<li >4 A really ironic artisan </li>
<li >5 A really ironic artisan </li>
<li >6 A really ironic artisan </li>
<li >7 A really ironic artisan </li>
<li >8 A really ironic artisan </li>
<li >9 A really ironic artisan </li>
<li >10 A really ironic artisan </li>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
var out=$("#out").get(0);
var inner=$("#inner").get(0);
var time1=null;
var flag=true;
var move=function(){
time1=setInterval(function(){
if(out.scrollTop>inner.offsetHeight){
out.scrollTop=0;
}
out.scrollTop+=1;
},30);
};
move();
inner.onmouseover=function(e){
var e=e|| window.e;
var targetName= e.target|| e.srcElement;
if(targetName.nodeName.toLocaleLowerCase()==="li"){
clearInterval(time1);
}
};
inner.onmouseout=function(){
move();
}
});
</script>
</html>
