jquery 기반 그림 전환 효과
<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}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.