jquery animate图片模向滑动示例代码


Posted in Javascript onJanuary 26, 2011

这个对象中每个属性都表示一个可以变化的样式属性(如"height"、"top"或"opacity")。 注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是"hide"、"show"或"toggle"这样的字符串值,则会为该属性调用默认的动画形式。

函数声明如下:

animate(params[, duration[, easing[, callback]]])

在 jQuery 中,你可以使用 em 和 % 单位。另外,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

下面演示一个图片列表左右滑动的示例,主要代码如下:

<script type="text/javascript"> 
$(function() { 
$li1 = $(".apply_nav .apply_array"); 
$window1 = $(".apply .apply_w"); 
$left1 = $(".apply .img_l"); 
$right1 = $(".apply .img_r"); $window1.css("width", $li1.length*166); 
var lc1 = 0; 
var rc1 = $li1.length-5; 
$left1.click(function() { 
if (lc1 < 1) { 
alert("已经是第一张图片"); 
return; 
} 
lc1--; 
rc1++; 
$window1.animate({left:'+=166px'}, 1000); 
}); 
$right1.click(function() { 
if (rc1 < 1) { 
alert("已经是最后一张图片"); 
return; 
} 
lc1++; 
rc1--; 
$window1.animate({left:'-=166px'}, 1000); 
}); 
}) 
</script>

运行结果如图所示:
jquery animate图片模向滑动示例代码
在线演示:http://demo.3water.com/js/2011/jqueryanimate/index.html
源码下载:点击下载
Javascript 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
Bootstrap表单布局
Jul 19 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
js操作二进制数据方法
Mar 03 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 #Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 #Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 #Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 #Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 #Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 #Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 #Javascript
You might like
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Nginx实现反向代理
2017/09/20 Servers
php双层循环(九九乘法表)
2017/10/23 PHP
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
使用python Django做网页
2013/11/04 Python
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
python操作mysql代码总结
2018/06/01 Python
浅析python的优势和不足之处
2018/11/20 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
Python os模块常用方法和属性总结
2020/02/20 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
工程部经理岗位职责
2013/12/08 职场文书
本科生职业生涯规划书范文
2014/01/21 职场文书
《老山界》教学反思
2014/04/08 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
pandas中对文本类型数据的处理小结
2021/11/01 Python
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python
win7配置本地ftp服务器的图文教程
2022/08/05 Servers