liMarquee – jQuery无缝滚动插件

女爷i 2021-06-26 16:06 1183阅读 0赞

## 简介 ##

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

## 使用方法 ##

1、引入文件

2、HTML

<div class="dowebok">jQuery无缝滚动插件liMarquee</div>

3、JavaScript

$(function(){ 
        $('.dowebok').liMarquee();
    });

## 配置 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">名称</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">direction</td> 
   <td align="left">字符串</td> 
   <td align="left"><code>left</code></td> 
   <td align="left">滚动方向，可选 <code>left / right / up / down</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>loop</code></td> 
   <td align="left">整数</td> 
   <td align="left">-1</td> 
   <td align="left">循环次数，-1 为无限循环</td> 
  </tr> 
  <tr> 
   <td align="left">scrolldelay</td> 
   <td align="left">整数</td> 
   <td align="left">0</td> 
   <td align="left">每次重复之前的延迟</td> 
  </tr> 
  <tr> 
   <td align="left">scrollamount</td> 
   <td align="left">整数</td> 
   <td align="left">50</td> 
   <td align="left">滚动速度，越大越快</td> 
  </tr> 
  <tr> 
   <td align="left">circular</td> 
   <td align="left">布尔值</td> 
   <td align="left">True</td> 
   <td align="left">无缝滚动，如果为 <code>false</code>，则和 <code>marquee</code> 效果一样</td> 
  </tr> 
  <tr> 
   <td align="left">drag</td> 
   <td align="left">布尔值</td> 
   <td align="left">True</td> 
   <td align="left">鼠标可拖动</td> 
  </tr> 
  <tr> 
   <td align="left">runshort</td> 
   <td align="left">布尔值</td> 
   <td align="left">True</td> 
   <td align="left">内容不足是否滚动</td> 
  </tr> 
  <tr> 
   <td align="left">hoverstop</td> 
   <td align="left">布尔值</td> 
   <td align="left">True</td> 
   <td align="left">鼠标悬停暂停</td> 
  </tr> 
  <tr> 
   <td align="left">xml</td> 
   <td align="left">布尔值</td> 
   <td align="left">False</td> 
   <td align="left">加载 <code>xml</code> 文件</td> 
  </tr> 
  <tr> 
   <td align="left">inverthover</td> 
   <td align="left">布尔值</td> 
   <td align="left">False</td> 
   <td align="left">反向，即默认不滚动，鼠标悬停滚动</td> 
  </tr> 
 </tbody> 
</table>

--------------------

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <title>jQuery无缝滚动插件liMarquee演示-向上滚动_dowebok</title>
    <link rel="stylesheet" href="css/liMarquee.css">
    <style> .dowebok { width: 790px; height: 200px; margin: 100px auto; font-size: 14px;} .dowebok ul { margin: 0; line-height: 30px;} .dowebok a { color: #333; text-decoration: none;} .dowebok a:hover { text-decoration: underline;} </style>
    </head>
    <body>
    <h1>向上滚动</h1>
    
    <div class="dowebok">
       <ul>
          <li>
             <a href="http://www.dowebok.com/187.html">Smoothslides – 可平移的jQuery幻灯片插件</a>
          </li>
          <li>
             <a href="http://www.dowebok.com/77.html">jQuery全屏滚动插件fullPage.js</a>
          </li>
          <li>
             <a href="http://www.dowebok.com/131.html">WOW.js – 让页面滚动更有趣</a>
          </li>
          <li>
             <a href="http://www.dowebok.com/139.html">让IE7 IE8支持CSS3 background-size属性</a>
          </li>
          <li>
             <a href="http://www.dowebok.com/117.html">shCircleLoader – jQuery Loading效果插件</a>
          </li>
          <li>
             <a href="http://www.dowebok.com/185.html">jQuery cForm – jQuery表单美化插件</a>
          </li>
          <li>
             <a href="http://www.dowebok.com/177.html">Quttons – Quantum Paper风格按钮</a>
          </li>
          <li>
             <a href="http://www.dowebok.com/173.html">Ideal Image Slider – 简单的纯JS幻灯片</a>
          </li>
          <li>
             <a href="http://www.dowebok.com/156.html">evenZoom – jQuery放大镜插件</a>
          </li>
          <li>
             <a href="http://www.dowebok.com/155.html">DAD – jQuery拖拽/拖放插件</a>
          </li>
       </ul>
    </div>
    
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.liMarquee.js"></script>
    <script> $(function(){ $('.dowebok').liMarquee({ direction: 'up' }); }); </script>
    </body>
    </html>

## 常用参数如下： ##

align：是设定活动字幕的位置，除了居左、居中、居右三种位置外，又增加*上（top）和*下（bottom）两种位置。 
    Bgcolor：用于设定活动字幕的背景颜色，可以使用英文的单词也可以是十六进制数的。 
    Direction：用于设定活动字幕的滚动方向是向左（left）、向右（right）、向上（up）、向下（down）。 
    Behavior：用于设定滚动的方式，主要由三种方式：
    behavior="scroll"表示由一端滚动到另一端；
    behavior="slide":表示由一端快速滑动到另一端，且不再重复；
    behavior="alternate"表示在两端之间来回滚动。 
    Height：用于设定滚动字幕的高度。 
    Width：则设定滚动字幕的宽度。 
    Hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。 
    Scrollamount：用于设定活动字幕的滚动距离。数值越小，滚动的速度就越快。 
    scrolldelay：用于设定滚动两次之间的延迟时间，数值越小，间隔就越小。 
    Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。其中默认情况是向左滚动无限次，字幕高度是文本高度；滚动范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。