jquery.liMarquee.js-文字滚动效果

jquery.liMarquee.js插件：jquery多风格多功能滚动特效代码插件

说明：须引入3个文件 jquery.js、liMarquee的js和css文件

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>枫桥夜泊</title>
    <link rel="stylesheet" href="../js/jquery-liMarquee/liMarquee.css">
    <style type="text/css">
        .marquee {
            width: 300px;
            height: 36px;
            line-height: 36px;
            font-size: 30px;
            font-weight: 700;
            background: none;
        }
    </style>
</head>

<body>
    <p class="marquee">姑苏城外寒山寺，夜半钟声到客船</p>

    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/jquery-liMarquee/jquery.liMarquee.js"></script>
    <script>
        $(function () {
            // 文字过长滚动
            $('.marquee').liMarquee({
                direction: 'left', // 滚动方向
                scrollamount: 30, // 滚动速度
                runshort: false, // 内容不足时不滚动
                drag: false, //鼠标可拖动
                circular: false //是否无缝滚动
            });
        });
    </script>
</body>
</html>

参数配置：

名称类型默认值说明
direction 字符串 left 滚动方向，可选 left / right / up / down
loop 整数 -1 循环次数，-1 为无限循环
scrolldelay 整数 0 每次重复之前的延迟
scrollamount 整数 50 滚动速度，越大越快
circular 布尔值 true 无缝滚动，如果为 false，则和 marquee 效果一样
drag 布尔值 true 鼠标可拖动
runshort 布尔值 true 内容不足是否滚动
hoverstop 布尔值 true 鼠标悬停暂停
xml 布尔值 false 加载 xml 文件
inverthover 布尔值 false 反向，即默认不滚动，鼠标悬停滚动
posted @ 2023-01-12 17:09  自在逍遥处  阅读(1127)  评论(0)  编辑  收藏  举报