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 反向,即默认不滚动,鼠标悬停滚动
相关推荐
ftpeak2 天前
从零开始使用 axum-server 构建 HTTP/HTTPS 服务
网络·http·https·rust·web·web app
fanged3 天前
Cesium4--地形(OSGB到3DTiles)
3d·gis·web
三角叶蕨3 天前
javaweb CSS
css·web
OEC小胖胖3 天前
App Router vs. Pages Router:我应该如何选择?
开发语言·前端·前端框架·web·next.js
脑子慢且灵4 天前
[JavaWeb]模拟一个简易的Tomcat服务(Servlet注解)
java·后端·servlet·tomcat·intellij-idea·web
虚伪的空想家6 天前
K8S的dashboard部署与访问
云原生·容器·kubernetes·k8s·web·dashboard
脑子慢且灵7 天前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee
诗人不说梦^7 天前
[RootersCTF2019]I_<3_Flask
web·ctf
OEC小胖胖9 天前
Next.js数据获取入门:`getStaticProps` 与 `getServerSideProps`
前端·前端框架·web·next.js
借你耳朵说爱你10 天前
浅拷贝和深拷贝两种不同的对象复制
vue·web