walliam 2014-07-31
Jq实现的3Q图片切换特效,代码简单,效果不错。

function test{
if(imgScan.isStart==true)
return;
imgScan.isStart=true;
//点击第一张
for (var i = 0; i < $(".centerImg").length; i ) {
var mHeight = $($(".centerImg")[i]).height();
var mLeft = $($(".centerImg")[i]).offset().left - $("#imgCenter").offset().left - 30;
var mTop = (300 - mHeight) / 2;
if (mHeight == 300) {
$($(".centerImg")[i]).animate({
marginLeft: "-500px",
opacity: 0
}, 500, function() {
//回到等待位置
$(this).css("margin-left", "300px").css("display", "none").css("height", "160px").css("margin-top", "70px").css("z-index", "0");
imgScan.isStart=false;
});
} else if (mHeight == 160) {
$($(".centerImg")[i]).css("display", "none").css("z-index", 0);;
$($(".centerImg")[i]).animate({
height: "180px",
marginTop: "60px",
marginLeft: "90px",
opacity: 1
}, 500);
} else {
$($(".centerImg")[i]).css("z-index", mHeight)
$($(".centerImg")[i]).animate({
height: mHeight 40 "px",
marginTop: mTop - 20 "px",
marginLeft: mLeft "px"
}, 500,function(){});
}
}
}演示地址:http://www.pengyaou.com/LegendsZ/eg/3DImgC/
文章出处:http://www.pengyaou.com/LegendsZ/File/2014/07/31/20140731164425214.html