zoukankan      html  css  js  c++  java
  • 上下左右无空隙不间断图片连续滚动代码

    向上:

    <div id=demo style=overflow:hidden;height:100;90;
    background:#214984;color:#ffffff>
    <div id=demo1>
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.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>

    向下:

    <div id=demo style=overflow:hidden;height:100;90;
    background:#214984;color:#ffffff>
    <div id=demo1>
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    </div>
    <div id=demo2></div>
    </div>
        <script>
        var speed=30
        demo2.innerHTML=demo1.innerHTML
        demo.scrollTop=demo.scrollHeight
        function Marquee(){
        if(demo1.offsetTop-demo.scrollTop>=0)
        demo.scrollTop+=demo2.offsetHeight
        else{
        demo.scrollTop--
        }
        }
        var MyMar=setInterval(Marquee,speed)
        demo.onmouseover=function() {clearInterval(MyMar)}
        demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
      </script>

    向左:

    <div id="demo" style="overflow:hidden;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.baidu.com/img/logo.gif" ></td>
                  <td><img src="http://www.baidu.com/img/logo.gif" ></td>
                  <td><img src="http://www.baidu.com/img/logo.gif" ></td>
                  <td><img src="http://www.baidu.com/img/logo.gif" ></td>
                  <td><img src="http://www.baidu.com/img/logo.gif" ></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>=demo2.offsetWidth)
      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>

    向右:

    <div id="demo" style="overflow:hidden;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.baidu.com/img/logo.gif"></td>
                  <td><img src="http://www.baidu.com/img/logo.gif"></td>
                  <td><img src="http://www.baidu.com/img/logo.gif"></td>
                  <td><img src="http://www.baidu.com/img/logo.gif"></td>
                  <td><img src="http://www.baidu.com/img/logo.gif"></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>
  • 相关阅读:
    Android入门:监听ContentProvider数据改变
    Android入门:ListView(SimpleCursorAdapter实现)
    Android入门:ContentProvider
    Android入门:ListView(继承BaseAdapter实现)
    随机生成字符串实现
    很惊讶douban.com是用python语言的一个框架写的
    简单的总是好的,在这个复杂的世界: java simple log
    Quixtoe比PHP更简单吗?
    python 与 ruby (ruby学习资源大全)
    Web的未来:语义网
  • 原文地址:https://www.cnblogs.com/footleg/p/1613666.html
Copyright © 2011-2022 走看看