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 反向,即默认不滚动,鼠标悬停滚动
相关推荐
OEC小胖胖2 天前
Next.js数据获取入门:`getStaticProps` 与 `getServerSideProps`
前端·前端框架·web·next.js
借你耳朵说爱你2 天前
浅拷贝和深拷贝两种不同的对象复制
vue·web
诗人不说梦^3 天前
[CISCN2019 总决赛 Day2 Web1]Easyweb
web·ctf
OEC小胖胖3 天前
Next.js 介绍:为什么选择它来构建你的下一个 Web 应用?
开发语言·前端·web·next.js
OEC小胖胖3 天前
页面间的导航:`<Link>` 组件和 `useRouter`
前端·前端框架·web·next.js
练习时长两年半的Java练习生(升级中)4 天前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
科技树支点5 天前
无GC的Java创新设计思路:作用域引用式自动内存管理
java·python·go·web·编程语言·编译器
OEC小胖胖6 天前
React学习之路永无止境:下一步,去向何方?
前端·javascript·学习·react.js·前端框架·react·web
OEC小胖胖6 天前
给你的应用穿上“外衣”:React中的CSS方案对比与实践
前端·前端框架·react·web
OEC小胖胖7 天前
代码质量保障:使用Jest和React Testing Library进行单元测试
前端·react.js·单元测试·前端框架·web