jquery实现跑马灯效果（一） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            var demo = $("#demo")[0];
            var demo1 = $("#demo1")[0];
            var demo2 = $("#demo2")[0];
            var speed = 10;    //滚动速度值，值越大速度越慢
 var nnn = 200 / demo1.offsetHeight;
            for (i = 0; i < nnn; i++) {
                demo1.innerHTML += "<br />" + demo1.innerHTML
 }
            demo2.innerHTML = demo1.innerHTML    //克隆demo2为demo1
 function Marquee() {
                if (demo2.offsetTop - demo.scrollTop <= 0)    //当滚动至demo1与demo2交界时
 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>
</head>
<body>
<div align="center" id="demo" style="overflow:hidden;height:200px;width:600px;border:1px solid #000;">
    <div id="demo1">
        HTML5是一个丰富的应用，可以给用户很多视觉上的享受！
    </div>
    <div id="demo2"></div>
</div>
</body>
</html>

　　转自：https://my.oschina.net/guopengfei/blog/534891

posted @ 2017-09-25 10:52  lanyan  阅读(6689)  评论(0)    收藏  举报