jquery实现跑马灯效果（一）

最新推荐文章于 2025-05-27 12:35:44 发布

weixin_33716557

最新推荐文章于 2025-05-27 12:35:44 发布

阅读量228

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/guopengfei/blog/534891

2019独角兽企业重金招聘Python工程师标准>>>

一个不错的跑马灯的代码，不是坑，肯定可以执行，需要先行引入jquery.js文件。

本例可用于滚动新闻效果，下面的例子是一个向上滚动的demo,小编将持续将其他形式的跑马灯源码贴出来。

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

同时欢迎朋友们加入我的QQ群交流问题：129113306

转载于:https://my.oschina.net/guopengfei/blog/534891