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

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

1 html 

<body>
        <div class="main">
            <div class="wrap" id="wrap">
                <h2>叫我大头就好</h2>
                <ul class="ul" id="ul">
                    <li><span>111111</span><b>2016-10-31</b></li>
                    <li><span>111111</span><b>2016-10-31</b></li>
                    <li><span>111111</span><b>2016-10-31</b></li>
                    <li><span>111111</span><b>2016-10-31</b></li>
                    <li><span>111111</span><b>2016-10-31</b></li>
                    <li><span>111111</span><b>2016-10-31</b></li>
                </ul>
                <a href="#" class="close" id="close"></a>
                <div class="trun" id="trun">叫我大头</div>
            </div>
        </div>
    </body>

View Code

2 html 的样式

<style>
            * {
                padding: 0;
                margin: 0;
            }
            
            ul {
                list-style: none;
            }
            
            .main {
                width: 300px;
                min-height: 0;
                margin: 20px auto;
                border: 2px solid goldenrod;
                position: relative;
            }
            
            .wrap {
                background: #F1F1F1;
                width: 300px;
                height: 70px;
                /* 220*/
                margin: 0px auto;
                position: absolute;
                top: 150px;
                overflow: hidden;
                opacity: 0;
                -webkit-perspective: 800px;
                perspective: 800px;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                /* -webkit-transition: 1s all; 
                -moz-transition: 1s all; 
                transition: 1s all;*/
            }
            
            .wrap h2 {
                height: 70px;
                width: 100%;
                line-height: 70px;
                background: #F1F1F1;
            }
            
            .wrap li {
                height: 50px;
                width: 100%;
                border: 1px solid none;
                box-sizing: border-box;
                background: #F1F1F1;
                line-height: 50px;
                background-image: url(images/em_bg.png);
                background-position: calc(100% - 15px) 0;
                background-size: contain;
                background-repeat: no-repeat;
                transform-origin: bottom center;
                -webkit-transform-origin: top center;
                transform: rotateX(-90deg);
                -webkit-transform: rotateX(-90deg);
                transition: 0.5s;
            }
            .wrap li span{position: absolute; left: 0;top: 0;height: 100%;width: auto;}
            .wrap li b{position: absolute; right: 0;top: 0;height: 100%;width: auto;}
            
            @keyframes rotateZ {
                0% {
                    transform: rotateZ(0deg);
                    -webkit-transform: rotateZ(0deg);
                    -webkit-transform-origin: center center;
                }
                
                100% {
                    transform: rotateZ(360deg);
                    -webkit-transform: rotateZ(360deg);
                    -webkit-transform-origin: center center;
                }
            }
            .wrap .close {
                height: 19px;
                width: 19px;
                background-image: url(images/close.png);
                background-position: 0 0;
                background-size: contain;
                background-repeat: no-repeat;
                position: absolute;
                top: 25.5px;
                display: block;
                right: 15px;
                line-height: 19px;
            }
            .wrap .close:hover {
                -moz-animation: 0.5s rotateZ;
                -webkit-animation: 0.5s rotateZ;
                animation: 0.5s rotateZ;
            }
            .trun{
                position: absolute;
                top: 70px;
                left: 0;
                height: calc(100% - 70px);
                width: 100%;
                font-size: 30px;
                background: green;
                text-align: center;
                display: none;
            }
            .active{
                box-shadow:0px 5px 20px rgba(148, 92, 78, 0.4);
                background:#ffde00;
                /*border : 1px solid #F1F1F1;*/
            }
        </style>

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<li.length;i++) { if(iMax<Math.abs(i-this.index)) { iMax=Math.abs(i-this.index); iNow=i; } li[i].style.transition="0.5s "+Math.abs(i-this.index)*100+"ms cubic-bezier(0.115, -0.195, 0.255, -0.280)"; li[i].style.WebkitTransform="rotateY("+iDeg+"deg)"; li[i].style.opacity=0.1; } li[iNow].addEventListener("webkitTransitionEnd",end,false); function end() { this.removeEventListener("webkitTransitionEnd",end,false); trun.style.opacity=1; } } // X 进行翻转 trun.addEventListener('click',function(){ this.style.transition = '0.5s ' this.style.opacity = 0 this.addEventListener('webkitTransitionEnd',function(){ },false) },false) function getCurrentStyle(ele, attr) { if(ele.currentStyle) { return ele.currentStyle[attr]; //IE } else { return getComputedStyle(ele, false)[attr]; }; }; </script>
结语:我想吐血  不要问我为什么  你懂得                  2016-11-0419:56:36

 

0 条评论
发表一条评论