仿3D

效果图

示例代码：

html文件：

        <div id="box">
            <a href="javascript:;">
                ![]((img/1.jpg))
            </a>
            <a href="javascript:;">
                ![]((img/3.jpg))
            </a>
            <a href="javascript:;">
                ![]((img/5.jpg))
            </a>
            <a href="javascript:;">
                ![]((img/6.jpg))
            </a>
            <a href="javascript:;">
                ![]((img/7.jpg))
            </a>
            <a href="javascript:;">
                ![]((img/8.jpg))
            </a>
            <a href="javascript:;">
                ![]((img/9.jpg))
            </a>
        </div>

css代码：

          *{
                margin:0;
                padding:0;
            }
            #box{
                width:800px;
                height:400px;
                margin:50px auto;
                position: relative;
            }
            #box img{
                position: absolute;
            }
            #box .aa{
                width:320px;
                height:160px;
                top:-160px;
                left:0;
                z-index:1;
                opacity: 0;
            }
          #box .aa1{
              width:320px;
              height:160px;
              top:120px;
              left:0;
              z-index:1;
              opacity: 0.2;
          }
          #box .aa2{
            width:360px;
            height:180px;
            top:110px;
            left:100px;
            z-index:2;
            opacity:0.6;
          }
          #box .aa3{
            width:400px;
            height:200px;
            top:100px;
            z-index:3;
            left:200px;
            opacity: 1;
          }
          #box .aa4{
            width:360px;
            height:180px;
            top:110px;
            left:340px;
            z-index:2;
            opacity:0.6;
          }
          #box .aa5{
            width:320px;
            height:160px;
            top:120px;
            left:480px;
            z-index:1;
            opacity: 0.2;
          }
          #box .aa6{
            width:320px;
            height:160px;
            top:-160px;
            left:480px;
            z-index:1;
            opacity: 0;
          }

js代码：

        var aImg=document.getElementsByTagName("img");
        var arr=["zIndex","width","height","opacity","left","top"];
        var arrVal=[];
        for(var i=0;i<aImg.length;i++){
             var oarr={};
            for(var j=0;j<arr.length;j++){
                if(arr[j]=="opacity"){
                    var icur=Math.round(getStyle(aImg[i],'opacity')*100)
                }else{
                    var icur=parseInt(getStyle(aImg[i],arr[j]))
                }
              oarr[arr[j]]=icur;    
            }
            arrVal.push(oarr)
        }

        setInterval(function(){
            arrVal.push(arrVal.shift());
//          console.log(arrVal[0]);
            for(var i=0;i<aImg.length;i++){
                startMove(aImg[i], arrVal[i])
            }
        },3000)

        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr]
            }else{
                return getComputedStyle(obj)[attr]
            }
        }

        function startMove(obj,json,fnEnd){
            //每次调用的时候，就需要只有一个定时器在工作，（开始运动时候关闭所有定时器）
            //并且关闭或开启都是当前物体的定时器，防止与页面上其他定时器冲突，使每个定时器互不干扰。
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var bStop=true; //假设所有的都已经到达目标了。
                for(var name in json){
                    var iTarget=json[name] //所有的目标点
                    if(name=="opacity"){
                        var cur=parseInt(parseFloat(getStyle(obj,name))*100)
                    }else{
                        var cur=parseInt(getStyle(obj,name))   //cur是当前移动的数值
                    }
                    var speed=(iTarget-cur)/10;
                    //物体运动的速度，数字越小运动的越慢。
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    if(name=="opacity"){
                        obj.style.opacity=(cur+speed)/100
                    }else if(name=='zIndex'){
                        obj.style[name]=cur+speed
                    }else{
                        obj.style[name]=cur+speed+"px";
                    }
                    //某个值不等于目标点
                    if(cur!=iTarget){
                        bStop=false;
                    }
                }

                if(bStop){
                    clearInterval(obj.timer);
                    if(fnEnd){
                        fnEnd();
                    }
                }
            },20)
        }