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. 首先定义 ...
随机推荐
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- js对象、数组转换字符串
对象转换成字符串需要使用toString()方法. 1 var a = function(){ 2 console.log(111); 3 }; 4 var b = a.toString(); 5 c ...
- KlayGE 4.4中渲染的改进(四):SSSSS
转载请注明出处为KlayGE游戏引擎,本文的永久链接为http://www.klayge.org/?p=2774 本系列的上一篇提到了KlayGE 4.4将会出现的高质量地形渲染.本篇仍讲一个新功能, ...
- .NET面试题解析(05)-常量、字段、属性、特性与委托
系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 弱小和无知不是生存的障碍,傲慢才是!——<三体> 常见面试题目: 1. const和reado ...
- java基础复习 - 自动装箱
Integer a = 127; // 将整形127装箱对象 Integer b = 127; // 同上 System.out.print( a==b ); // true System.out.p ...
- java中变量运算细节 (2)
/* 目的:测试变量的运算方式 结果:byte a, b, c; a = b+c; 或者 a = b+10 形如这种形式的算式, 等式的右边的运算结果默认的都是int型的!因为等式右边有变量, 编译器 ...
- 用ticons指令结合ImageMagickDisplay工具批量生成Android适应图片
用ticons指令结合ImageMagickDisplay工具批量生成Android适应图片 ticons的用法可以百度 这里记录下具体的编译方法 在安装了ticons和ImageMagickDisp ...
- 15款免费的 HTML5/CSS3 响应式网页模板
如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...
- redis学习之二from github
大概敲了一遍基本命令,熟悉了redis的存储方式.现在开始进一步系统的学习.学习教程目前计划有三个,一个是github上的https://github.com/JasonLai256/the-litt ...
- java变量的加载顺序
学习编程思想 package com.test.java.classs; /** * Created by Administrator on 2015/12/7. * 在类的内部,变量定义的顺序决定了 ...