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设置FieldSet展开与收缩
May 15 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 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
dedecms模板标签代码官方参考
2007/03/17 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
python中模块的__all__属性详解
2017/10/26 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
Tesserocr库的正确安装方式
2018/10/19 Python
详解Python循环作用域与闭包
2019/03/21 Python
python把转列表为集合的方法
2019/06/28 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
平面设计的岗位职责
2013/11/08 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
个人综合鉴定材料
2014/05/23 职场文书
温馨提示标语
2014/06/26 职场文书
解放思想演讲稿
2014/09/11 职场文书
承租经营合作者协议书
2014/10/01 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
交通事故被告代理词
2015/05/23 职场文书
导游词之凤凰古城
2019/10/22 职场文书