收集整理的四个方向的滚动

时间：2021-11-12 09:16:28|栏目：JavaScript代码|点击：次

向上滚动

</P>
<P><div id=demo style=overflow:hidden;height:100;width:90; background:#214984;color:#ffffff> <div id=demo1>  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  </div>  <div id=demo2></div>  </div>    <script>    var speed=30    demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2    function Marquee(){ //当滚动至demo1与demo2交界时 if(demo2.offsetTop-demo.scrollTop<=0)   demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端 else{ demo.scrollTop++    }    }    var MyMar=setInterval(Marquee,speed)//设置定时器 //鼠标移上时清除定时器达到滚动停止的目的    demo.onmouseover=function() {clearInterval(MyMar)} //鼠标移开时重设定时器    demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} </script> </P>
<P>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

向下滚动

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

向左滚动

</P>
<P><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="https://www.jb51.net/logos.gif" width="88"></td>              <td><img src="https://www.jb51.net/logos.gif" width="88"></td>     <td><img src="https://www.jb51.net/logos.gif" width="88"></td>     <td><img src="https://www.jb51.net/logos.gif" width="88"></td>              <td><img src="https://www.jb51.net/logos.gif" width="88"></td>            </tr>          </table>        </td>        <td id="demo2" valign="top"></td>        </tr>      </table>    </div>  <script>  var speed=1//速度数值越大速度越慢  demo2.innerHTML=demo1.innerHTML  function Marquee(){  if(demo2.offsetWidth-demo.scrollLeft<=0)  demo.scrollLeft-=demo1.offsetWidth  else{  demo.scrollLeft++  }  }  var MyMar=setInterval(Marquee,speed)  demo.onmouseover=function() {clearInterval(MyMar)}  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}  </script></P>
<P>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

向右滚动

</P>
<P><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="https://www.jb51.net/logos.gif" width="88"></td>              <td><img src="https://www.jb51.net/logos.gif" width="88"></td>     <td><img src="https://www.jb51.net/logos.gif" width="88"></td>     <td><img src="https://www.jb51.net/logos.gif" width="88"></td>              <td><img src="https://www.jb51.net/logos.gif" width="88"></td>            </tr>          </table>        </td>        <td id="demo2" valign="top"></td>        </tr>      </table>    </div>  <script>  var speed=1//速度数值越大速度越慢  demo2.innerHTML=demo1.innerHTML  function Marquee(){  if(demo.scrollLeft<=0)  demo.scrollLeft+=demo2.offsetWidth  else{  demo.scrollLeft--  }  }  var MyMar=setInterval(Marquee,speed)  demo.onmouseover=function() {clearInterval(MyMar)}  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}  </script></P>
<P>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：微信小程序实现计算器案例

栏目：JavaScript代码

下一篇：纯js实现轮播图效果

本文标题：收集整理的四个方向的滚动

本文地址：http://www.codeinn.net/misctech/183283.html

更多JavaScript代码

JavaScript代码

收集整理的四个方向的滚动

阅读排行

推荐教程