liMarquee – jQuery无缝滚动插件

最新推荐文章于 2024-04-10 00:15:35 发布

.NET跨平台

最新推荐文章于 2024-04-10 00:15:35 发布

阅读量3.4k

点赞数 1

分类专栏： Jquery及其组件

Jquery及其组件专栏收录该内容

147 篇文章 3 订阅

订阅专栏

简介

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

使用方法

1、引入文件

<link rel="stylesheet" href="/css/liMarquee.css">
<script src="/js/jquery-1.9.0.min.js"></script>
<script src="/js/jquery.liMarquee.js"></script>

2、HTML

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

3、JavaScript

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

配置

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

<!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表示一直滚动下去，直到页面更新。其中默认情况是向左滚动无限次，字幕高度是文本高度；滚动范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。