一个基于jquery的图片切换效果


Posted in Javascript onJuly 06, 2010

下面的代码对于学习jquery的朋友是个参考
一个基于jquery的图片切换效果
html代码:

代码

<div class="warp" id="warp"> 
<img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic1.bmp" alt="" class="imgBig" /> 
<img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic2.bmp" alt="" class="imgLittle" /> 
<img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic3.bmp" alt="" class="imgLittle" /> 
<img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic4.bmp" alt="" class="imgLittle" /> 
</div>

javascript:

$(document).ready(function(){ 
var $warp = $("#warp"); 
$warp.IsRunning = false; 
var seconds = 500; 
$warp.children("img").click(function(){ 
if($warp.IsRunning){return;} 
$warp.IsRunning = true; 
var $imgs = $("#warp").children("img"); $imgs.eq(2).css("marginTop","63px").animate({marginTop:"0px"},{duration:seconds}); 
$imgs.eq(0).css({position:"absolute",opacity:"0.5"}).animate({width:"108px", height:"57px",left:"372px",top:"126px",opacity:"1"},{duration:seconds}); 
//$imgs.eq(1).css({position:"absolute",left:"372px",top:"6px",opacity:"0.2"}); 
$imgs.eq(1).css({position:"absolute",left:"372px",top:"6px",opacity:"0.2",clear:"none"}).animate({width:"360px", height:"190px",left:"-9px",top:"-5px",opacity:"1"},{duration:seconds,complete:function(){ 
$imgs.eq(0).appendTo($("#warp")); 
$imgs.eq(0).removeAttr("style").removeClass("imgBig").addClass("imgLittle"); 
$imgs.eq(1).removeAttr("style").removeClass("imgLittle").addClass("imgBig"); 
$warp.IsRunning = false; 
}}); 
}); 
});

css代码:

.warp{width:487px; height:194px; overflow:hidden;border:solid 1px #ccc;position:relative; top:0px; left:0px; background-color:#fafafa} 
.warp img{border-width:0px;cursor:pointer;position:relative; top:0px; left:0px} 
.imgBig{float:left; width:360px; height:190px;padding:2px;} 
.imgLittle{float:right; width:108px; height:57px;padding:6px 5px 0 10px;clear:right}
Javascript 相关文章推荐
script标签的 charset 属性使用说明
Dec 04 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
react build 后打包发布总结
Aug 24 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
javascript实现点击产生随机图形
Jan 25 Javascript
js中实现继承的五种方法
Jan 25 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 #Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 #Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 #Javascript
JavaScript 内置对象属性及方法集合
Jul 04 #Javascript
js以对象为索引的关联数组
Jul 04 #Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 #Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 #Javascript
You might like
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
List Installed Software Features
2007/06/11 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
javascript 动态创建表格
2015/01/08 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python做简单的字符串匹配详解
2017/03/21 Python
python数据结构之链表详解
2017/09/12 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python实现批量文件重命名
2019/10/31 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
人事部经理岗位职责
2014/03/07 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
情感电台广播稿
2015/08/18 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby