jQuery中使用liMarquee无缝滚动走马灯

Posted 2021-07-24 铁锤妹妹@

前言

liMarquee官方文档

liMarquee 是一款基于 jQuery 的无缝滚动插件，类似于 html 的 marquee 标签，但比 marquee 更强大。它可以应用于任何 Web 元素，包括文字、图像、表格、表单等元素，同时它可以设置不同的滚动方向（左右上下）、滚动速度、鼠标悬停暂停、鼠标拖动、加载 xml 文件等等。

使用方法

首先去官方文档下载压缩包，取出我们想要的css和js文件放在我们的项目里

1、引入文件

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="./js/jquery.liMarquee.js"></script>
<link rel="stylesheet" href="./css/liMarquee.css">

2、HTML

 <ul class="list">
     <li>这是第一条信息这是第一条信息这是第一条信息这是第一条信息</li>
     <li>这是第二条信息这是第二条信息这是第二条信息这是第二条信息</li>
     <li>这是第三条信息这是第三条信息这是第三条信息这是第三条信息</li>
     <li>这是第四条信息这是第四条信息这是第四条信息这是第四条信息</li>
 </ul>

3、javascript

   $(function(){
        $('.list').liMarquee({
            direction: 'up',
            scrollamount:10
        });
    });