文字跑马灯插件liMarquee.js

最新推荐文章于 2024-04-22 13:44:28 发布

明致成

最新推荐文章于 2024-04-22 13:44:28 发布

阅读量3.8k

点赞数 1

分类专栏： JavaScript JQuery

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/LiyangBai/article/details/86516096

版权

JavaScript 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

JQuery

4 篇文章 0 订阅

订阅专栏

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;
}

明致成

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
文字跑马灯插件liMarquee.js

HTML中引入jQuery.liMarquee.js和liMarquee.css&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-
复制链接

扫一扫