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 相关文章推荐
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
vue 清空input标签 中file的值操作
Jul 21 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
3.从实例开始
2006/10/09 PHP
php不用正则验证真假身份证
2013/11/06 PHP
ThinkPHP之getField详解
2014/06/20 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
Python编程中的文件操作攻略
2015/10/16 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
使用python编写监听端
2018/04/12 Python
Python微信操控itchat的方法
2019/05/31 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
Linux上比较文件的命令都有哪些
2013/09/28 面试题
Python的两道面试题
2013/06/29 面试题
管理科学大学生求职信
2013/11/13 职场文书
生产操作工岗位职责
2014/09/16 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技