编写一个 类似妙为的2013年官网的弹窗效果
编写一个 类似妙为的2013年官网的弹窗效果
1 html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
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