上下左右无间断滚动

最新推荐文章于 2017-11-09 11:40:00 发布

黄铜渣渣

最新推荐文章于 2017-11-09 11:40:00 发布

阅读量306

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u014330950/article/details/72820952

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!--适合左右滚动-->
<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">
      <table cellpadding="0" cellspacing="0" border="0">
        <tr><td id="demo1" valign="top" align="center">
          <table cellpadding="2" cellspacing="0" border="0">
            <tr align="center">
             <td><img src="http://www.haao.cn/logo.gif" width="88" /></td>
             <td><img src="http://www.haao.cn/logo.gif" width="88" /></td>
             <td><img src="http://www.haao.cn/logo.gif" width="88" /></td>
             <td><img src="http://www.haao.cn/logo.gif" width="88" /></td>
             <td><img src="http://www.haao.cn/logo.gif" width="88" /></td>
            </tr>
          </table>
        </td>
        <td id="demo2" valign="top"></td>
        </tr>
      </table>
</div>
<!--//适合上下滚动
<div id=demo style=overflow:hidden;height:100;width:90; background:#214984;color:#ffffff> 
<div id=demo1> 
<img src="http://www.haao.cn/logo.gif"> 
<img src="http://www.haao.cn/logo.gif"> 
<img src="http://www.haao.cn/logo.gif"> 
<img src="http://www.haao.cn/logo.gif"> 
<img src="http://www.haao.cn/logo.gif"> 
<img src="http://www.haao.cn/logo.gif"> 
<img src="http://www.haao.cn/logo.gif"> 
<img src="http://www.haao.cn/logo.gif"> 
<img src="http://www.haao.cn/logo.gif"> 
</div> 
<div id=demo2></div> 
</div> 
-->
<script type="text/javascript">
var speed=1//速度数值越大速度越慢
var rollmain=document.getElementById("demo")
var rollbegin=document.getElementById("demo1")
var rollfollow=document.getElementById("demo2")
rollfollow.innerHTML=rollbegin.innerHTML 
   //无间断向左滚动
function MarqueeLeft(){
     if(rollfollow.offsetWidth-rollmain.scrollLeft<=0)
     rollmain.scrollLeft-=rollbegin.offsetWidth
     else{
     rollmain.scrollLeft++
     }
}

   //无间断向右滚动
function MarqueeRight(){
   if(rollmain.scrollLeft<=0)
     rollmain.scrollLeft+=rollfollow.offsetWidth
   else{
     rollmain.scrollLeft--
     }
}

//无间断向下滚动
function MarqueeDown(){ 
    if(rollbegin.offsetTop-rollmain.scrollTop>=0) 
    rollmain.scrollTop+=rollfollow.offsetHeight 
    else{ 
    demo.scrollTop-- 
    } 
} 
//无间断向上滚动
function MarqueeUp(){ 
   if(rollfollow.offsetTop-rollmain.scrollTop<=0)   
    rollmain.scrollTop-=rollbegin.offsetHeight 
else{ 
    rollmain.scrollTop++ 
   } 
} 

//向左
var MyMar=setInterval(MarqueeLeft,speed)
rollmain.οnmοuseοver=function() {clearInterval(MyMar)}
rollmain.οnmοuseοut=function() {MyMar=setInterval(MarqueeLeft,speed)}

/*//向右
var MyMar=setInterval(MarqueeRight,speed)
rollmain.οnmοuseοver=function() {clearInterval(MyMar)}
rollmain.οnmοuseοut=function() {MyMar=setInterval(MarqueeRight,speed)}
*/

/*//向上
var MyMar=setInterval(MarqueeUp,speed)
rollmain.οnmοuseοver=function() {clearInterval(MyMar)}
rollmain.οnmοuseοut=function() {MyMar=setInterval(MarqueeUp,speed)}
*/

/*//向下
var MyMar=setInterval(MarqueeDown,speed)
rollmain.οnmοuseοver=function() {clearInterval(MyMar)}
rollmain.οnmοuseοut=function() {MyMar=setInterval(MarqueeDown,speed)}
*/
</script>