编写一个类似妙为的2013年官网的弹窗效果

1 html

        
                  
                       
        叫我大头就好
                
                            
         1111112016-10-31
                    
         1111112016-10-31
                    
         1111112016-10-31
                    
         1111112016-10-31
                    
         1111112016-10-31
                    
         1111112016-10-31
                
        
                
                        
        
         叫我大头

View Code

2 html 的样式

3 现在是最关键的伟大的JavaScript代码

window.onload = function() {                var wrap = document.getElementById("wrap")                var ul = document.getElementById("ul")                var li = wrap.getElementsByTagName('li')                var close = document.getElementById("close")                var H = getCurrentStyle(wrap, 'height')                var trun = document.getElementById("trun")                wrap.style.transition = '1s ease-in opacity,.8s 0.5s ease-in-out height,.5s 0.5s  top'                wrap.style.opacity = 1                wrap.style.height = 220 + 'px'                wrap.style.top = (200 - parseInt(H)) / 2 + "px"                                for(var i = 0; i < H.length; i++) {                                        li[i].style.transition = "1.5s  " + 0.5 + i * 2000 + "ms "                    li[i].style.webkitTransform = "rotateX(0deg)"                    li[i].style.webkitTransformOrigin = "top " ;                                    }                var span = document.getElementById("ul").getElementsByTagName('span')                var b =  document.getElementById("ul").getElementsByTagName('b')                for(var i = 0; i < span.length; i++) {                    span[i].addEventListener('mouseover',function(){                        var parent = this.parentNode                        parent.className = "active "                        parent.style.transition = '0.5s '                        parent.style.webkitTransform = 'rotateY(-30deg)'                        parent.style.webkitTransformOrigin = "center center  " ;                        //进行翻转                        this.addEventListener('click',function(){                            Trun(li,360,2,0,1)                        },false)                    })                    span[i].addEventListener('mouseout',function(){                        var parent = this.parentNode                        parent.className = ""                        parent.style.transition = '0.5s '                        parent.style.webkitTransform = 'rotateY(0deg)'                        parent.style.webkitTransformOrigin = "center center "                    })                }                for(var j = 0; j < b.length; j++) {                    b[j].addEventListener('mouseover',function(){                        var parent = this.parentNode                        parent.className = " active "                        parent.style.transition = '0.5s '                        parent.style.webkitTransform = 'rotateY(30deg)'                        parent.style.webkitTransformOrigin = "center center "                                                this.addEventListener('click',function(){                            clickfn(parent);                        },false)                    })                    b[j].addEventListener('mouseout',function(){                                              var parent = this.parentNode 　　　　　　　　　　　　　　parent.classname=""                        parent.style.transition = '0.5s '                        parent.style.webkitTransform = 'rotateY(0deg)'                        parent.style.webkitTransformOrigin = "center center "                    })                }                                close.addEventListener('click', function() {                    var height = getCurrentStyle(wrap, "height")                    var top = getCurrentStyle(wrap, "top")                    wrap.style.transition = "1s all"                    wrap.style.opacity = 0                    wrap.style.height = 0                    wrap.style.top = (parseInt(top) + parseInt(height) )/2+ "px"                })                                            }            //点击li 进行翻转            function clickfn(){                var iNow = 0;                var iMax = 0;                for(var i=0;i