liMarquee使用

简介

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 反向,即默认不滚动,鼠标悬停滚动
相关推荐
diandian~1 天前
[N1CTF 2018]eating_cms
web
IDC02_FEIYA1 天前
Discuz论坛网站管理员的默认用户名admin怎么修改啊?
服务器·web
Dovir多多3 天前
Linux守护Pythom脚本运行——Supervisor学习总结
linux·运维·服务器·python·安全·云计算·web
墨渊君9255 天前
CSS 技巧:如何让 div 完美填充 td 高度
前端·javascript·css·web
OEC小胖胖5 天前
深入理解 Vue 3 中的 emit
前端·javascript·vue.js·前端框架·web
LLLLLindream5 天前
11.15 HTML
java-ee·web
OEC小胖胖6 天前
Vue 3 插槽详解
前端·javascript·vue.js·web
OEC小胖胖6 天前
Vue 3 中的 ref 完全指南
前端·javascript·vue.js·前端框架·web
曾经的三心草6 天前
JavaWeb之AJAX
java·ajax·json·axios·web
kali-Myon7 天前
ctfshow-web入门-JWT(web345-web350)
前端·学习·算法·web安全·node.js·web·jwt