zoukankan      html  css  js  c++  java
  • scrollTop实现图像循环滚动(实例1)

    <html>
    <head>
    <title>scrollTop实现图像循环滚动(实例1)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style>
    body{margin:0px 0px 0px 0px}
    </style>
    </head>
    <body>
    <div id="container" style="height:75px; 480px; overflow:hidden ;border:1px red solid;margin-bottom:0px;margin-top:0px">
    <div id="banner1" style="height:75px;border:0px blue dotted;margin-bottom:0px;margin-top:0px;">
    <div align="center" style="border:0px;margin-bottom:0px;line-height:75px">
    <img src="images/001.png" border=0 />
    <img src="images/002.gif" border=0 />
    <img src="images/003.png" border=0 />
    <img src="images/004.png" border=0 />
    <img src="images/005.png" border=0 />
    <img src="images/006.png" border=0 />
    </div>
    </div>
    <div id="banner2" style="height:75px;border:0px green dotted;margin-bottom:0px;margin-top:0px"></div>
    </div>
    <script>
    var scrollSpeed=50;
    banner2.innerHTML=banner1.innerHTML;
    function myMarquees(){
    //向上循环滚动
    if(banner2.offsetTop-container.scrollTop<=0)
    {
    document.getElementById("showresult").value='banner2.offsetTop='+banner2.offsetTop+" container.scrollTop="+container.scrollTop;
    container.scrollTop-=banner1.offsetHeight; //清零,重新开始
    }
    else{
    document.getElementById("showresult").value='banner2.offsetTop='+banner2.offsetTop+" container.scrollTop="+container.scrollTop;
    container.scrollTop++; //相当于将demo容器的垂直滚动条滑块向下滚动
    }

    }
    var mqs=setInterval(myMarquees,scrollSpeed)
    container.onmouseover=function() { clearInterval(mqs) }
    container.onmouseout=function() { mqs=setInterval(myMarquees,scrollSpeed) }

    </script>

    <textarea id="showresult" style="300px"></textarea>

    </body>
    </html>

  • 相关阅读:
    hihocoder 1049 后序遍历
    hihocoder 1310 岛屿
    Leetcode 63. Unique Paths II
    Leetcode 62. Unique Paths
    Leetcode 70. Climbing Stairs
    poj 3544 Journey with Pigs
    Leetcode 338. Counting Bits
    Leetcode 136. Single Number
    Leetcode 342. Power of Four
    Leetcode 299. Bulls and Cows
  • 原文地址:https://www.cnblogs.com/yzryc/p/6038987.html
Copyright © 2011-2022 走看看