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.ajax 用户登录验证代码
Oct 29 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 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 在线翻译函数代码
2009/05/07 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
Jquery 插件开发笔记整理
2011/01/17 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python下载指定页面上图片的方法
2016/05/12 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
SQL数据库笔试题
2016/03/08 面试题
大学生个人推荐信范文
2013/11/25 职场文书
团队经理竞聘书
2014/03/31 职场文书
法人委托书范本格式
2014/09/15 职场文书
廉政承诺书
2015/01/19 职场文书
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL