zoukankan      html  css  js  c++  java
  • marquee上下左右循环无缝滚动代码


    一、横向滚动
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    <table width= "760 " align= "center " border= "1 " >
    <tr>
    <td align= "center ">
    <div id=demo style= 'overflow:hidden;height:110px;750px; '>
    <table height=110 border=0 cellspacing=0 cellpadding=0>
    <tr>
    <td id=demo1>
    <!-- 下面是你要显示的内容 -->
    <table width=780>
    <tr>
    <td> 第一 </td>
    <td> 第二 </td>
    <td> 文章标题 </td>
    <td> 最牛交通工具 <br> 添  加: <br> 更新时间:2004年10月9日 ' </td>
    <td> 经典动物幽默图集 <br> 添  加: <br> 更新时间:2004年10月7日 ' </td>
    <td> 新化二中 <br> 添  加: <br> 更新时间:2004年10月7日 ' </td>
    </tr>
    </table>
    <!-- 显示的内容结束! -->
    </td>
    <td id=demo2> </td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    </table>
    <script>
    var speed=15
    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>
    </td>
    </tr>
    </table>
    </BODY>
    </HTML>

    二、纵向滚动
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    <table width="100%" border="0" cellspacing="2" cellpadding="2">

    <tr> <td align="center"> <table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="194" style="padding-top:8px" valign="top">
    <DIV id=rolllinkk style="OVERFLOW: hidden; WIDTH: 145px; HEIGHT: 200px">
    <DIV id=rolllinkk1>
    <!-- 下面是你要显示的内容 -->
    <table width="100%" border="0" cellspacing="2" cellpadding="2">
    <tr> <td align="center">最牛交通工具 </td> </tr>
    <tr> <td align="center">最牛交通工具 </td> </tr>
    <tr> <td align="center">最牛交通工具 </td> </tr>
    <tr> <td align="center">最牛交通工具 </td> </tr>
    <tr> <td align="center">最牛交通工具 </td> </tr>
    <tr> <td align="center">最牛交通工具 </td> </tr>
    <tr> <td align="center">最牛交通工具 </td> </tr>
    <tr> <td align="center">最牛交通工具 </td> </tr>
    <tr> <td align="center">最牛交通工具 </td> </tr>
    <tr> <td align="center">最牛交通工具 </td> </tr>
    <tr> <td align="center">最牛交通工具 </td> </tr>
    </table>
    <!-- 显示的内容结束! -->
    <DIV align=center> </DIV> </DIV>
    <DIV id=rolllinkk2>
    <DIV align=center> </DIV> </DIV> </DIV>
    <SCRIPT>
    var rollspeed=30
    rolllinkk2.innerHTML=rolllinkk1.innerHTML //
    function Marquee1(){
    if(rolllinkk2.offsetTop-rolllinkk.scrollTop <=0) //
    rolllinkk.scrollTop-=rolllinkk1.offsetHeight //
    else{
    rolllinkk.scrollTop++
    }
    }
    var MyMar1=setInterval(Marquee1,rollspeed) //
    rolllinkk.onmouseover=function() {clearInterval(MyMar1)}//
    rolllinkk.onmouseout=function() {MyMar1=setInterval(Marquee1,rollspeed)}//
    </SCRIPT>
    </td>
    </tr>
    </table>
    </td> </tr>
    </table>
    </td>
    </tr>
    </table>
    </BODY>
    </HTML>

  • 相关阅读:
    「UVA12293」 Box Game
    「CF803C」 Maximal GCD
    「CF525D」Arthur and Walls
    「CF442C」 Artem and Array
    LeetCode lcci 16.03 交点
    LeetCode 1305 两棵二叉搜索树中的所有元素
    LeetCode 1040 移动石子直到连续 II
    LeetCode 664 奇怪的打印机
    iOS UIPageViewController系统方法崩溃修复
    LeetCode 334 递增的三元子序列
  • 原文地址:https://www.cnblogs.com/momjs/p/6187562.html
Copyright © 2011-2022 走看看