zoukankan      html  css  js  c++  java
  • JavaScript实现图片的不间断连续滚动

    制作的代码不给大家加注释了!代码中的图片大家都可以自己加上自己的超级连接,修改的方法为:<a href="连接的地址" target=_blank><img src="/img/link.gif" width=图片宽度 height=图片高度 border="0"></a>

      先制作向上滚动的效果:

    <!-- 指向链接图片url -->
    <base href="http://www.webjx.com">
    <div id=demo style=overflow:hidden;height:150;90;background:#214984;color:#ffffff>
    <div id=demo1>
    <!-- 定义图片 -->
    <img src="/img/link.gif">
    <img src="/img/link1.gif">
    <img src="/img/link2.gif">
    <img src="/img/link3.gif">
    <img src="/img/link4.gif">
    </div>
    <div id=demo2></div>
    </div>


    <script>
    var speed=30
    demo2.innerHTML=demo1.innerHTML
    function Marquee(){
    if(demo2.offsetTop-demo.scrollTop<=0)
    demo.scrollTop-=demo1.offsetHeight
    else{
    demo.scrollTop++
    }
    }
    var MyMar=setInterval(Marquee,speed)
    demo.onmouseover=function() {clearInterval(MyMar)}
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
    </script>

      制作向下滚动的效果:

      将上面“制作向上滚动的效果”中的红色字体Js部分替换成:

    <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>

      制作向左滚动的效果: 

    <base href="http://www.webjx.com">
    <div id=demo style=overflow:hidden;height:33;200;background:#214984;color:#ffffff>
    <table align=left cellpadding=0 cellspace=0 border=0>
    <tr>
    <td id=demo1 valign=top><img src="/img/link.gif"><img src="/img/link1.gif"><img src="/img/link2.gif"><img src="/img/link3.gif">
    </td>
    <td id=demo2 valign=top></td>
    </tr>
    </table>
    </div>

    <script>
    var speed=30
    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>
     
      制作向右滚动的效果: 
      将上面“制作向左滚动的效果”中的红色字体Js部分替换成:
    <script>
    var speed=30
    demo2.innerHTML=demo1.innerHTML
    demo.scrollLeft=demo.scrollWidth
    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>
  • 相关阅读:
    Razor强类型视图下的文件上传
    Js Date对象
    Js用正则表达式验证字符串
    PLC软件: KW multiprog 和 codesys
    S7 200 下载程序块报错 "A compile error occurred , check non-fatal errors for more information " 大端模式
    WebOP Designer (在电脑上在线仿真)与 西门子 S7-200 PPI 通讯
    企业做iISO9001质量管理体系认证的步骤(通俗描述)
    .net framework 装不上的原因
    iso9001质量管理体系认证需要准备的材料&具体流程
    EPLAN 部件库中一个被容易遗漏的功能——“新变量”
  • 原文地址:https://www.cnblogs.com/lavenderzh/p/1336542.html
Copyright © 2011-2022 走看看