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 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
理解JavaScript变量作用域更轻松
Oct 25 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
微信小程序实现购物车功能
Nov 18 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中的三元运算符使用说明
2011/07/03 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
javascript代码加载优化方法
2011/01/30 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
vuejs指令详解
2017/02/07 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python导入坐标点的具体操作
2019/05/10 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
高校辅导员推荐信范文
2013/12/25 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
2014年人事部工作总结
2014/12/03 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
公司仓库管理制度
2015/08/04 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
世界十大狙击步枪排行榜
2022/03/20 杂记