孙肖宁

使用javascript实现的无缝滚动(跑马灯)
使用javascript实现的无缝滚动(跑马灯),小编在这里简单描述一下:内容一直滚动,鼠标经过的时候滚动就会暂停...
扫描右侧二维码阅读全文
14
2018/10

使用javascript实现的无缝滚动(跑马灯)

使用javascript实现的无缝滚动(跑马灯),小编在这里简单描述一下:内容一直滚动,鼠标经过的时候滚动就会暂停。
效果示例图:

1.png

实现代码如下:

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>无缝滚动</title> 
  <style>
    img{
      width: 100px;
      height: 50px;
    }
    #demo{
      overflow: hidden; 
      width: 735px; 
      height: 165px
    }
    table{

    }
  </style>
 </head> 
 <body> 
  <div id="demo" class="hdo gd_img"> 
   <table cellpadding="0" align="left" border="0" cellspace="0"> 
    <tbody> 
     <tr> 
      <td id="demo1" valign="top"> 
       <table cellspacing="0" cellpadding="4" width="2150" border="0" id="tupian"> 
        <tbody> 
         <tr> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/1.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/2.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/3.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/4.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/1.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/2.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/3.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/4.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/1.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/2.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/3.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/4.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/1.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/2.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/3.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/4.jpg" /><br />小宁博客</a></td> 
         </tr>
        </tbody>
       </table></td> 
      <td id="demo2" valign="top"></td>
     </tr>
    </tbody>
   </table>
  </div> 
  <script>
      var speed1=25//速度数值越大速度越慢
      document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
      function Marquee1(){
          if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
            document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
          else{
            document.getElementById("demo").scrollLeft++
             }
          }
          var MyMar1=setInterval(Marquee1,speed1)
          document.getElementById("demo").onmouseover=function () {clearInterval(MyMar1)}
          document.getElementById("demo").onmouseout=function () {MyMar1=setInterval(Marquee1,speed1)}
  </script>  
 </body>
</html>
Last modification:October 14th, 2018 at 08:44 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment