js-滾動字幕 (文字跑馬燈效果 推送)

滾動字幕

這裏寫圖片描述

自動滾動和滾動速度及設置鼠標懸停

這裏寫圖片描述

添加內容

這裏寫圖片描述

跑馬燈時間

這裏寫圖片描述

ready()方法

這裏寫圖片描述

文字跑馬燈插件liMarquee.js

HTML中引入jQuery.liMarquee.js和liMarquee.css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字跑馬燈效果</title>
    <link rel="stylesheet" href="../lib/css/liMarquee.css">
    <link rel="stylesheet" href="./textRun.css">
    <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/js/jquery.liMarquee.js"></script>
    <script type="text/javascript" src="./textRun.js"></script>
</head>
<body>
    <div class="content">
        <span>百度</span>
        <span>京東</span>
        <span>哈氣</span>
        <span>妹子</span>
        <span>美女</span>        
    </div>
</body>
</html>

js屬性設置說明 


$(function(){
    /**
     * 屬性設置:
     * direction滾動的方向,left、right、up、down
     * scrollamount滾動的速度,數值,數值越小越慢
     * circular是否無縫滾動,true、false
     * drag是否禁止拖動,true、false
     * runshort內容不足是否滾動,true、false
     * hoverstop鼠標懸停是否停止滾動,true、false
     * inverthover反向,即鼠標懸停滾動
     * 自定義事件:pause、play、destroy、update
     *      eg:$dowebok.liMarquee('pause');
     */
    $(".content").liMarquee({
        direction: "left",//默認left
        scrollamount: 10,//默認
        circular: true,//默認true
        drag: false,//默認true
        runshort: false,//默認true
        hoverstop: true,//默認true
        inverthover: false,//默認true
    });
})
css文件:
.content{
    width: 150px;
    }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章