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 demo 基本技巧
Dec 18 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
JavaScript严格模式详解
Jan 16 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
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中rename函数用法分析
2014/11/15 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
PHP常用处理静态操作类
2015/04/03 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
vue router demo详解
2017/10/13 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
门面房租房协议书
2014/12/01 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2015年春节标语口号
2014/12/09 职场文书
化验员岗位职责
2015/02/14 职场文书
出生证明格式
2015/06/15 职场文书
消防安全培训工作总结
2015/10/23 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL