
特效分类 | 图片特效 | 文件大小 | 0.46 MB | 需要授权 | 无需授权 | 是否开源 | 开源 |
详细说明
ali.js是一款滚动插件,滚动的内容可包含文字和图片。它的API也很强大,包括滚动区域可见个数、每次滚动个数、滚动方向、是否循环滚动、是否自动滚动、滚动间隔时间、滚动动画速度、动画效果、滚动方向以及开始滚动索引。
演示一:ul列表滚动html代码
<div id="lista1" class="als-container"> <span class="als-prev"><img src="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="http://www.sucaihuo.com/js/614.html" target="_blank"> <img src="images/als-images/calculator.png" alt="calculator" /> jQuery环状圆形菜单</a></li> <li class="als-item"><a href="http://www.sucaihuo.com/js/615.html" target="_blank"> <img src="images/als-images/light_bulb.png" alt="light_bulb" /> jQuery手机各种下拉菜单效果加搜索输入框</a></li> </ul> </div> <span class="als-next"><img src="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开始 });
演示二:div结构+垂直滚动
<div id="lista2" class="als-container"> <span class="als-prev"><img src="images/thin_top_arrow_333.png" alt="prev" title="previous" /></span> <div class="als-viewport"> <div class="als-wrapper"> <div class="als-item"> <a href="http://www.sucaihuo.com/js/528.html" target="_blank"> <img src="images/als-images/calculator.png" alt="calculator" /> swipe多种手机触屏滑动效果</a> </div> <div class="als-item"> <a href="http://www.sucaihuo.com/js/529.html" target="_blank"> <img src="images/als-images/light_bulb.png" alt="light_bulb" /> PHP在线生成word文档</a> </div> </div> </div> <span class="als-next"><img src="images/thin_bottom_arrow_333.png" alt="next" title="next" /></span> </div>
$("#lista2").als({ visible_items: 2, scrolling_items: 1, orientation: "vertical", circular: "yes", autoscroll: "no", start_from: 1 });
演示三:水平滚动、自动滚动、可见元素个数、滚动阶梯、间隔时间(秒)
$("#demo3").als({ visible_items: 4, scrolling_items: 2, orientation: "horizontal", circular: "yes", autoscroll: "yes", interval: 4000 });
演示四:简单水平滚动、手动滚动、滚动阶梯、初始化第几个开始滚动(从0开始)
$("#demo4").als({ visible_items: 4, scrolling_items: 2, orientation: "horizontal", circular: "yes", autoscroll: "no", start_from: 2 });
alsAPI参数
参数 | 描述 | 默认值 |
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 |
版权声明:本站资源除特殊标注外均收集自网络或由用户发布,如有侵权请联系删除。
还木有评论哦,快来抢沙发吧~