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

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

 

posted @   Zhaiew  阅读(784)  评论(0)  编辑  收藏  举报
相关博文：
·  如何实现layer双层弹窗子页面向父页面传递数据
·  如何封装 ECharts 并导入动态数据
·  请使用纯js实现一个横向或纵向的无缝滚动效果
·  js实现界面文字无缝横向滚动(轮播、跑马灯)
·  解决页面竖向滚动条导致元素尺寸发生变化的问题
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae