编写一个 类似妙为的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 Code2 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