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