jQuery als.js 跑马灯

ali.js是一款滚动插件，滚动的内容可包含文字和图片。它的API也很强大，包括滚动区域可见个数、每次滚动个数、滚动方向、是否循环滚动、是否自动滚动、滚动间隔时间、滚动动画速度、动画效果、滚动方向以及开始滚动索引。

在线实例

实例演示

使用方法

<div id="lista1" class="als-container">  <span class="als-prev"><img src="data:images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>  <div class="als-viewport">  <ul class="als-wrapper">  <li class="als-item"><a href="#" target="_blank"> <img src="data:images/als-images/calculator.png" alt="calculator" /> jQuery环状圆形菜单</a></li>  <li class="als-item"><a href="#" target="_blank"> <img src="data:images/als-images/light_bulb.png" alt="light_bulb" /> jQuery手机各种下拉菜单效果加搜索输入框</a></li>  </ul>  </div>  <span class="als-next"><img src="data:images/thin_right_arrow_333.png" alt="next" title="next" /></span>
</div>
$("#lista1").als({ visible_items: 4, //可见个数 scrolling_items: 2, //每次滚动个数 orientation: "horizontal", //滚动方向 circular: "yes", //是否循环滚动 autoscroll: "no", //自动播放 interval: 5000, //滚动间隔时间 speed: 500, //滚动动画速度 easing: "linear", //动画效果 direction: "right", //滚动方向 start_from: 0 //初始化索引，从0开始
});

参数详解

参数	描述	默认值
visible_items	可见个数	3
scrolling_items	每次滚动个数	1
orientation	滚动方向，可选'horizontal','vertical'	horizontal
circular	是否循环滚动	no
autoscroll	是否自动滚动	no
interval	滚动间隔时间毫秒	4000
speed	滚动动画速度毫秒	600
easing	动画效果，可选参数'linear','swing'	swing
direction	滚动方向，可选参数'left','right','down','up'	left
start_from	开始滚动索引	0

下载

转载于:https://www.cnblogs.com/niuboren/p/5832087.html

jQuery als.js 跑马灯相关推荐

JS 跑马灯效果实现（很好用）
原文地址为: JS 跑马灯效果实现(很好用) 实现跑马灯效果的JS很多,但是很多不好用,下面介绍一个比较好用的. 好用之处在于: 1 支持一个页面多个跑马灯效果 2.支持跑马灯内容的异步加载关键的实 ...
【jQuery】实现跑马灯
利用就jquery实现跑马灯效果文章目录一.展现效果二.实现代码一.展现效果二.实现代码 <!DOCTYPE html> <html><head>< ...
android 跑马灯停顿,JS跑马灯滚动每行中间有停顿
setInterval(function() { //隐藏报表块REPORT0的滚动条 $("div[widgetname=REPORT0]").find(".froze ...
js在html中加文字走马灯特效,jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
html js 图片跑马灯,jquery跑马灯图片不间断滚动效果
在网页中为了显示更多内容,界面更美观,通常会用到"跑马灯"效果. 打开 Dreamweaver新建 HTML 文档:修改标题为"跑马灯"保存为 index.ht ...
web展现mysql_web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)
本帖最后由 yoin 于 2019-11-21 16:24 编辑产品需求: LED跑马灯页面展示内容(班级电脑展示) setLED更改内容(老师电脑更改内容) LED页面及时更新内容设计思路: 最初 ...
jquery 立体走马灯_jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
手机端html跑马灯效果,jQuery实现适用于移动端的跑马灯抽奖特效示例
本文实例讲述了jQuery实现适用于移动端的跑马灯抽奖特效.分享给大家供大家参考,具体如下: 图片全部隐私处理跑马灯抽奖特效难点一:奖品位置排放,如下图奖品1 奖品2 奖品3 奖品4 奖品5 奖品 ...
php实现跑马灯闪亮,JavaScript_基于jquery实现的文字向上跑动类似跑马灯的效果，想实现一个类似跑马灯的效果, - phpStudy...
基于jquery实现的文字向上跑动类似跑马灯的效果想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个页面代码恭喜187****5204获得1000RBM 恭喜1 ...
jquery实现图片的跑马灯效果
样式一(无限循环,消耗内存): <!DOCTYPE html> <html><head><meta charset="utf-8" /&g ...

jQuery als.js 跑马灯

在线实例

使用方法

参数详解

jQuery als.js 跑马灯相关推荐

最新文章

热门文章