一个基于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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
常用的javascript function代码
May 23 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
php获得文件扩展名三法
2006/11/25 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
一个简单的php路由类
2016/05/29 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
python追加元素到列表的方法
2015/07/28 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
资源环境与城市管理专业推荐信
2013/11/30 职场文书
会计试用期自我评价
2014/09/19 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
nginx容器方式反向代理实战
2022/04/18 Servers
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技