当前位置：首页 > 网页特效 > 幻灯片和轮播图

强大的jQuery跑马灯插件

分类：幻灯片和轮播图日期：2024-05-14 点击(0) 评论(0)

强大的jQuery跑马灯插件

简介

在页面中引入jquery和jquery.webticker.min.js文件。

```html
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.webticker.min.js"></script>
```
#####  HTML结构
使用无序列表作为跑马灯的HTML结构。

```html
<ul id="webTicker">
    <li>文本1</li>
    <li>文本2</li>
    <li>文本3</li>
    <li>......</li>
</ul>     
```             
#####  初始化插件
在页面加载完毕之后，可以通过webTicker()方法来初始化该跑马灯插件。

```html
$('#webTicker').webTicker();             
```
#####  配置参数
该跑马灯可用的配置参数如下：

|  参数 |  默认值 |描述   |
| ------------ | ------------ | ------------ |
|speed|50|跑马灯移动的速度。单位：像素/秒。|
|moving|true|设置跑马灯的状态是移动还是暂停。|
|startEmpty|true|设置元素是否从不可见的区域开始运动。|
|duplicate|false|跑马灯项是否在必要时复制来移除空白。|
|hoverpause|true|是否在鼠标滑过时暂停跑马灯的运动。|
|rssurl|false|RSS的URL地址（需要注意跨域的限制）。|
|rssfrequency|0|更新RSS的频率，单位分钟。0表示不更新。|
|updatetype|reset|定义更新跑马灯时是只重置新项目，还是跟新所有项目。|
|transition|linear|动画的easing过渡效果。|
|height|'30px'|跑马灯的高度，必须是一个带单位的字符串。|
|maskleft|''|在左侧作为遮罩层的图片。|
|maskright|''|在右侧作为遮罩层的图片。|
|maskwidth|0|定义遮罩层的宽度。|
#####  方法
|  方法 |  描述 |
| ------------ | ------------ |
|stop|停止跑马灯的运动。|
|cont|恢复跑马灯的运动。|
|update|更新跑马灯的内容。|
|transition|设置跑马灯的easing效果。|

web299.com

强大的jQuery跑马灯插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果