jquery實現跑馬燈效果（一）

時間 2019-11-17

原文原文鏈接

一個不錯的跑馬燈的代碼，不是坑，確定能夠執行，須要先行引入jquery.js文件。javascript

本例可用於滾動新聞效果，下面的例子是一個向上滾動的demo,小編將持續將其餘形式的跑馬燈源碼貼出來。html

<!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羣交流問題：129113306java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。