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 相关文章推荐
Js基础学习资料
Nov 23 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
原生js实现九宫格拖拽换位
Jan 26 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php验证码实现代码(3种)
2015/09/07 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
python计算最大优先级队列实例
2013/12/18 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
Python同时处理多个异常的方法
2020/07/28 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
简短的公司员工自我评价分享
2013/11/13 职场文书
学员自我鉴定
2014/03/19 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
村官个人总结范文
2015/03/03 职场文书