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 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
js比较日期大小的方法
May 12 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 Javascript
ant-design-vue按需加载的坑的解决
May 14 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环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python translator使用实例
2008/09/06 Python
使用python实现省市三级菜单效果
2016/01/20 Python
python使用pymysql实现操作mysql
2016/09/13 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
澳大利亚商务邀请函
2014/01/17 职场文书
学校食品安全实施方案
2014/06/14 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js