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 |
jQuery als.js 跑马灯的更多相关文章
- jQuery+CSS3文字跑马灯特效
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...
- JS跑马灯
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEA ...
- jquery的浪漫(跑马灯 + 雪花飘落)
jquery的浪漫 主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() jquery的运用,对dom元素的增删改查 css3 3d 功能的灵活运用 ...
- js 上下滚动加停顿效果,js 跑马灯加停顿效果
<div id="middle"> <ul id="slide1"> <li>尾号1183的用户刚刚领取了 78.23元 的 ...
- JS 跑马灯
利用jquery 来实现图片切换.文字转换移动的工具. MSClass 连接 http://www.popub.net/script/MSClass.html Mark 用
- js跑马灯效果
function nextPage() { /* 克隆第一张图片并添加到box后 box前移一张图片的距离动画 动画回调里把box的 ...
- Js跑马灯效果 && 在Vue中使用
DEMO: <!DOCTYPE html><html> <head> <title>滚动播报</title> <meta charse ...
- jquery.marquee.js - 有点奇怪的跑马灯动画,不过还是加上去了
客户想要一个跑马灯的效果,最终我用了jquery.marquee.js. 这个库很简单就能用. 效果是这样,从左到右,移动速度都不一样. 1. HTML <div class="mar ...
- 使用 JS 实现文字左右跑马灯
Ø 前言 其实,前面两篇已经基本上实现了图片.文字跑马灯,这里为什么还要学下文字左右跑马灯呢?因为,虽然基本一样,但实现起来还是有很大不同的,所以为了完整再补充一下.代码如下: 1. 首先定义 ...
随机推荐
- 中小型ERP系统开发与实施
1. 能反映企业管理的各个方面和解决企业实际的问题,不限于一般问题的解决,而是深入企业的业务过程 2. 在此软件的背后有真正的管理思想(不是泛泛而言)和对管理的精髓理解 和归纳,有一个整体的较详细的规 ...
- java JFileChooser选择文件和保存文件
//文件过滤器import java.io.File; import javax.swing.filechooser.FileFilter; public class MyFilter extends ...
- 【原创】Matlab.NET混合编程技巧之找出Matlab内置函数
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 Matlab和C#混合编程文章目录 :[目录]Matlab和C#混合编程文章目录 Matlab与.N ...
- HTML5第一讲
第一回合:什么是HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTM ...
- linux的计划
我接触linux也有好几年了,至少有5年了.最近公司在搞内部培训,人人都可以报名培训别人.想到自己在linux浸淫多年,应该出来出一份力.一直以来想就linux写一个专题.今天刚好在做相关的ppt,借 ...
- Python处理JSON
从开源中国的博客搬来,合并博客 一.JSON是什么? JSON是一种轻量级的数据交换格式 二.Python处理JSON的思维 其实很容易理解,无非是将数据编成JSON格式数据和吧JSON格式的数据解析 ...
- JAVA - 多线程 两种方法的比较
一.继承Thread类 实现方法: (1).首先定义一个类去继承Thread父类,重写父类中的run()方法.在run()方法中加入具体的任务代码或处理逻辑.(2).直接创建一个ThreadDemo2 ...
- MySQL 快速导入大量数据 资料收集
一.LOAD DATA INFILE http://dev.mysql.com/doc/refman/5.5/en/load-data.html 二. 当数据量较大时,如上百万甚至上千万记录时,向My ...
- 【SQL】统计所有表的行数
环境:mssql ent 2k8 r2 原理:遍历所有用户表,用sp_spaceused过程分别获取每张表的行数并写入临时表,最后返回临时表 IF OBJECT_ID('tempdb..#TableR ...
- 做10年Windows程序员与做10年Linux程序员的区别
如果一个程序员从来没有在linux,unix下开发过程序,一直在windows下面开发程序, 同样是工作10年, 大部分情况下与在linux,unix下面开发10年的程序员水平会差别很大.我写这篇文章 ...