下面的代码对于学习jquery的朋友是个参考
html代码：
代码
复制代码 代码如下:
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}