js-滚动字幕（文字跑马灯效果推送）

本文链接：https://blog.csdn.net/weixin_41906649/article/details/81675921

滚动字幕

这里写图片描述

自动滚动和滚动速度及设置鼠标悬停

这里写图片描述

添加内容

这里写图片描述

跑马灯时间

这里写图片描述

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

js-滚动字幕 （文字跑马灯效果 推送）

滚动字幕

自动滚动和滚动速度及设置鼠标悬停

添加内容

跑马灯时间

ready（）方法

文字跑马灯插件liMarquee.js

js-滚动字幕（文字跑马灯效果推送）