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>
  • 相关阅读:
    由群里在职的同学给出污染物推断题想到的
    参考文献期刊和会议的缩写
    并行程序开发笔记
    对有关推理方法的理解---支离破碎篇
    改基金的困惑与无奈
    对生物信息学基础的补习
    DPI深度报文检测架构及关键技术实现
    OSGi 和 C++
    CentOS安装glibc-2.14,错误安装libc.so.6丢失急救办法
    误删除libc.so.6的解决方法
  • 原文地址:https://www.cnblogs.com/footleg/p/1613666.html
Copyright © 2011-2022 走看看