简介
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大。它可以应用于任何 Web 元素,包括文字、图像、表格、表单等元素,同时它可以设置不同的滚动方向(左右上下)、滚动速度、鼠标悬停暂停、鼠标拖动、加载 xml 文件等等。
使用方法
1、引入文件
html
<link rel="stylesheet" type="text/css" href="./css/liMarquee.css"/>
<!-- 指定js文件字符集为UTF-8 -->
<script type="text/javascript" src="./js/jquery-3.6.0.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./js/jquery.limarquee.js" charset="UTF-8"></script>
2、HTML
html
<div class="marquee" style="width: 700px;height: 50px;">
<ul>
<li>TEST无缝滚动1</li>
<li>TEST无缝滚动2</li>
<li>TEST无缝滚动3</li>
<li>TEST无缝滚动4</li>
<li>TEST无缝滚动5</li>
<li>TEST无缝滚动6</li>
<li>TEST无缝滚动7</li>
</ul>
</div>
3、JavaScript
js
<script>
$(function () {
$('.marquee').liMarquee({
direction: 'up', // 滚动方向
scrollamount: 40, // 滚动速度
circular: "off" //是否无缝滚动
});
})
</script>
相关配置说明
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
direction | 字符串 | left | 滚动方向,可选 left / right / up / down |
loop | 整数 | -1 | 循环次数,-1 为无限循环 |
scrolldelay | 整数 | 0 | 每次重复之前的延迟 |
scrollamount | 整数 | 50 | 滚动速度,越大越快 |
circular | 布尔值 | true | 是否无缝滚动 |
drag | 布尔值 | true | 鼠标可拖动 |
runshort | 布尔值 | true | 内容不足时是否滚动 |
hoverstop | 布尔值 | true | 鼠标悬停暂停 |
xml | 布尔值 | false | 加载 xml 文件 |
inverthover | 布尔值 | false | 反向,即默认不滚动,鼠标悬停滚动 |