jquery2014-08-01 00:44:25 3810
前面给大家分享过一个Jquery3D图片轮换的实例,今天我又写了一个3D轮换的,方式有点改变,在此献上,不喜勿喷哈。先来一张效果图:
Jquery代码:
var imgScan = { isStart:false, Inizi: function() { for (var i = 1; i < 4; i ) { $($(".centerImg")[i]).css("margin-left", i * 30 "px").css("z-index", 10 - i); $($(".centerImg")[i]).animate({ height: 300 - (i * 40) "px", marginTop: i * 20 "px" }, 500); } }, StartRotation: function() { //alert(imgScan.isStart); 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(){}); } } } }
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Jquery3D轮换,3D幻灯片轮换,jq3D图片轮换
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/NjQ=.html
上一篇 Jquery放大镜效果
下一篇 CSS3日食效果