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. 首先定义 ...
随机推荐
- C++中如何定义类和对象?
在C++语言中,对象的类型被称为类,类代表了某一批对象的共性和特征. 类是对象的抽象,而对象是类的具体实例.如同C中的结构体一样,我们要先定义一个结构体,再使用结构体去定义一个变量.同一个结构体可以定 ...
- 【WP 8.1开发】一键锁屏
在WP8的时候,关于如何关闭屏幕,国内外都有不少文章了,大家有兴趣地可以搜搜,很多,我就不给链接了,因为稍后我的例子中会有. 其实,关闭屏幕是调用了未开放的API,正因为这个API未开放的,不敢保证所 ...
- hibernate(二)annotation第一个示例
一.在数据库中创建teacher表(数据库hibernate) create table teache( id int auto_increment primary key, name ), titl ...
- C# 索引器使用总结
1.索引器(Indexer): 索引器允许类或者结构的实例按照与数组相同的方式进行索引.索引器类似于属性,不同之处在于他们的访问采用参数. 最简单的索引器的使用 /// <summary> ...
- codeforces——Little Pony and Expected Maximum
/* 我们枚举每次选择最大数值的情况:m个数, 投掷n次 最大值是1: 1种 2: 2^n-1 3: 3^n-2^n ..... m: m^n-(m-1)^n 所以最后的结果=sum((k/m)^n ...
- java匿名类和匿名对象及this的其他用法
/* 匿名内部类:就是内部类的简写格式. 必须前提:内部类必须继承或者实现一个类或者接口. 匿名内部类其实就是一个匿名 子类对象. 格式:new 父类对象 or 接口(){ 子类内容:(覆盖父类的, ...
- Zepto中文API
原文地址:http://zeptojs.com/ 译文地址:http://www.html-5.cn/Manual/Zepto/ Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, ...
- 轻松自动化---selenium-webdriver(python) (十二)
本节重点: l 键盘按键用法 l 键盘组合键用法 l send_keys() 输入中文运行报错问题 键盘按键键用法: #coding=utf-8 from selenium import webdri ...
- 初探JavaScript(三)——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
- 【Swift学习】Swift编程之旅---析构方法(十九)
在一个类的实例内存被释放之前,析构方法被立即调用.使用deinit关键字来声明析构方法,类似于构造方法用init来声明.析构方法只适用于类类型. 析构方法原理 Swift会自动释放不再需要的实例以 ...