JS连续滚动效果

2016/10/27 9:54:49

Category 软件技术 Tag javascript,js,滚动

<div id="demo" style="overflow:hidden;height:150px;width:90px;"> 
<div id="demo1"> 
<!-- 定义图片 --> 
 <div>1你好啊</div>
 <div>2你好啊</div>
 <div>3你好啊</div>
 <div>4你好啊</div>
 <div>5你好啊</div>
 <div>6你好啊</div>
 <div>7你好啊</div>
 <div>8你好啊</div>
 <div>9你好啊</div>
</div> 
<div id="demo2"></div> 
</div> 
<script> 
var speed=30 
demo2.innerHTML=demo1.innerHTML 
function Marquee(){ 
 if(demo2.offsetTop-demo.scrollTop<=0) 
  demo.scrollTop-=demo1.offsetHeight 
 else{ 
  demo.scrollTop++ 
 }
}
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function() {clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
</script>