jquery实现跑马灯效果(一)
jquery实现跑马灯效果(一)
码上中国博客 发表于2年前
jquery实现跑马灯效果(一)
  • 发表于 2年前
  • 阅读 2871
  • 收藏 5
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 一个使用jquery实现的跑马灯的效果,当鼠标放上时,暂停,鼠标离开时,继续。

一个不错的跑马灯的代码,不是坑,肯定可以执行,需要先行引入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

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
码上中国博客
粉丝 50
博文 71
码字总数 69104
作品 1
×
码上中国博客
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: