jquery.liMarqee.js无缝滚动的使用问题

zhaiew / 2023-04-28 / 原文

引入 jq、liMarquee.js 和 liMarquee.css 文件
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="./js/jquery.liMarquee.js"></script>
    <link rel="stylesheet" href="./css/liMarquee.css">

在 <body></body> 中添加盒子

<div class="content">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>        
</div>

在 jquery 中使用

<script>
        $(function () {
            // 文字过长滚动
            $('.content').liMarquee({
                direction: 'left', // 滚动方向 可选 left / right / up / down
                scrollamount: 30, // 滚动速度 越大越快
                runshort: false, // 内容不足时不滚动
                drag: false, //鼠标可拖动
                circular: false //是否无缝滚动
                loop:-1 //循环次数 -1为无限循环
            });
        });
</script>

 

在横向滚动中不需要设置高度宽度,默认单条盒子高度,宽度全屏。

***在纵向滚动中需要设置容器高度,默认单条盒子宽度,若不设置高度则无法显示效果。***

.content{
    height:100px;
}
.content span{
    height:20px;
}