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. 首先定义 ...
随机推荐
- SSIS的CheckPoint用法
在SSIS的Package Property中有CheckPoints的属性目录,CheckPoint是SSIS的Failover Feature.通过简单的配置CheckPoint,能够在Packa ...
- How to load a local .CSS file & JavaScript resources using iPhone UIWebView Class
This post will cover the basic setup and creation of an application with web content for iPhone that ...
- .NET面试题解析(03)-string与字符串操作
系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 字符串可以说是C#开发中最常用的类型了,也是对系统性能影响很关键的类型,熟练掌握字符串的操作非常重要. 常 ...
- 编译原理LL1文法Follow集算法实现
import hjzgg.first.First; import java.util.LinkedHashMap; import java.util.Map; import java.util.Set ...
- 34988 Happy Reversal(二进制去取反)
/* 题意:给多个二进制数,对某些数进行按位取反操作! 然后从中找到最大数和最小数,并输出他们的差值! 注意:所有的数都是整数,包括取反之后 思路:一个n为二进制数x,令tmp为n位全1!则 y=tm ...
- 推荐一个算法编程学习中文社区-51NOD【算法分级,支持多语言,可在线编译】
最近偶尔发现一个算法编程学习的论坛,刚开始有点好奇,也只是注册了一下.最近有时间好好研究了一下,的确非常赞,所以推荐给大家.功能和介绍看下面介绍吧.首页的标题很给劲,很纯粹的Coding社区....虽 ...
- 利用Dapper ORM搭建三层架构
利用Dapper关系对象映射器写的简单的三层架构.Dapper:StackOverFlow在使用的一个微型的ORM,框架整体效率较高,轻量级的ORM框架.网上有较多的扩展.此处只是简单的调用Dappe ...
- 学习使用 jQuery & CSS3 制作照片堆栈效果
在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...
- asp.Net获取脚本传过来的参数的方法汇总
最基础的知识啦,不过,还是记下来吧. 接收用get 方法传输的数据的写法: string userName= Request.QueryString["name"]; 接收用pos ...
- EF总结
1.Entity Framework 查询历史最严重bug求解十万火急 2.http://www.cnblogs.com/badly1984/p/3203565.html 3.Entity Frame ...