实现图片向上不停的无限滚动效果简单代码 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var demo_t0 = document.getElementById("demo_t0");
            var demo_t1 = document.getElementById("demo_t1");
            var demo_t2 = document.getElementById("demo_t2");

            var speed = 30;
            demo_t2.innerHTML = demo_t1.innerHTML
            function Marquee() {
                if (demo_t2.offsetTop - demo_t0.scrollTop <= 8)
                    demo_t0.scrollTop -= demo_t1.offsetHeight;
                else {
                    demo_t0.scrollTop++;
                }
            }
            var MyMar = setInterval(Marquee, speed);

            demo_t0.onmouseover = function () { clearInterval(MyMar) };

            demo_t0.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
        }
    </script>
</head>
<body>
    <div id="demo_t0" style="height: 200px; width: 200px; overflow: hidden;">
        <div id="demo_t1" style="width:100%; height:120px;">
            <div style="float: left;width:45%;height:100px; background:Blue;">                
            </div>           
            <div style="float:left;width:10%;height:100px;"></div> 
            <div style="float: right;width:45%;height:100px; background:Gray;">               
            </div>            
        </div>
        <div id="demo_t2" style="width:100%;height:200px;">
        </div>
    </div>    
</body>
</html>

演示效果:

 

项目结构:

 

posted @ 2017-12-27 14:45  枫轻  阅读(1369)  评论(0)  编辑  收藏  举报