liMarquee – jQuery无缝滚动插件 女爷i 2021-06-26 16:06 1180阅读 0赞 ## 简介 ## `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(); }); ## 配置 ## <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表示一直滚动下去,直到页面更新。其中默认情况是向左滚动无限次,字幕高度是文本高度;滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。
还没有评论,来说两句吧...