Jquery3D图片轮换

walliam 2014-07-31

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

    Jquery3D图片轮换

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

相关推荐

yongquanx / 0评论 2016-04-17
淡风wisdon大大 / 0评论 2016-04-17