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 反向,即默认不滚动,鼠标悬停滚动
相关推荐
知孤云出岫5 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
细心的莽夫2 天前
JavaWeb学习笔记
java·开发语言·笔记·学习·java-ee·web
kali-Myon2 天前
NewStarCTF2024-Week5-Web&Misc-WP
前端·python·学习·mysql·web安全·php·web
觅_2 天前
HTML 鼠标滑动 页面的header背景从透明色变为黑色
前端·html·web
知孤云出岫2 天前
web安全测试渗透案例知识点总结(下)——小白入狱
网络·网络安全·web
Dangks5 天前
[前端] 为网站侧边栏添加搜索引擎模块
前端·javascript·搜索引擎·html·web·seo·博客技巧
扛枪的书生5 天前
Web 靶场笔记-bWAPP
渗透·web·kali
会思想的苇草i5 天前
CSS秘籍-高效样式技巧
前端·css·html·css3·web·flex
满分观测网友z6 天前
ExpandingCard扩展卡片
web·js
行十万里人生6 天前
HTTP 协议
后端·网络协议·http·网络安全·青少年编程·信息与通信·web