<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
</head>
<body>
http://down2.uc.cn/ucbrowser/v2/platform/android.php
<style>
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
list-style: none;
}
body {
font-family: "Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif";
-webkit-text-size-adjust:100%;
background: #fff;
color: #666;
-webkit-font-smoothing:antialiased;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/*clear*/
.cf:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
a{
color: #666;
text-decoration: none;
}
.mybtn{
position: absolute;
top: 78%;
left: 50%;
margin: 0 0 0 -65px;
width: 130px;
z-index: 90;
}
.mybtn a {
display: block;
}
.appstore{
margin-bottom: 10px;
padding: 3px 0 3px 39px;
height: 34px;
font-size: 12px;
line-height: 18px;
color: #fff;
border-radius: 3px;
background: #000 url(../images/appstore.png) no-repeat 10px 7px;
background-size: 21px 26px;
}
.appstore strong{
display: block;
font-size: 17px;
}
.crack{
margin: 0 20px;
font-size: 15px;
line-height: 20px;
text-align: center;
color: #686868;
}
.active{
position: absolute;
top: 0;
right:0;
z-index: 100;
display: block;
width: 102px;
height: 84px;
background: url(../images/active.png) no-repeat 0 0;
background-size: 102px 84px;
overflow: hidden;
}
a.active-link{
position: absolute;
top: 15px;
left: 27px;
display: block;
width: 86px;
height: 30px;
color: #fff;
text-align: center;
-webkit-transform: rotate(37deg);
}
.active-link h4{
font-size: 10px;
margin-top: -10px;
}
.active-link h3{
font-size: 12px;
font-family: 微软雅黑;
}
.slide li:before{
position: absolute;
bottom: 5px;
left: 50%;
content: '';
display: block;
width: 26px;
height: 18px;
margin-left: -13px;
background-image: url(../images/arrow_other.png);
background-size: 26px 18px;
-webkit-animation: shake 1s ease-in-out infinite normal;
}
@-webkit-keyframes shake{
0% {-webkit-transform: translate(0,0);}
25% {-webkit-transform: translate(0,-10px);}
50% {-webkit-transform: translate(0,0);}
70% {-webkit-transform: translate(0px,-5px);}
100% {-webkit-transform: translate(0,0);}
}
.slide li:last-child:before{
display: none;
}
/*slide-start*/
.slide{
position: relative;
overflow: hidden;
}
.slide ul{
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
background-size: 320px;
}
.slide li{
position: absolute;
left: 0;
top: 0;
width: 100%;
background: -webkit-radial-gradient(39% 77%,ellipse, #fff, #fff 50%, #edefff 70%);
background-size: 130% 120%;
-webkit-transition: transform .3s ease-in-out;
opacity: 0;
}
.slide .slide-img{
position: absolute;
top: 50%;
left: 12px;
margin-top: -44px;
}
.slide .slide-title{
position: absolute;
top: 27px;
left: 91px;
color: #01a8f2;
}
.slide .slide-text{
position: absolute;
top: 48px;
left: 91px;
font-size: 10px;
line-height: 21px;
}
.slide-point{
position: absolute;
top: 50%;
right: 16px;
margin: -50px 0 0 0;
display: none;
width: 9px;
text-align: center;
font-size: 0;
z-index: 90;
-webkit-animation: dis-show 0s ease forwards;
}
.slide-point span{
margin: 6px auto;
width: 4px;
height: 4px;
border-radius: 50%;
background: #c8e3f9;
display: block;
z-index: 100;
}
.slide-point span.current{
margin: 6px auto;
background: #8fcbfb;
z-index: 100;
}
.slide-point span:first-child{
width: 8px;
height: 8px;
margin: 4px auto;
background: url(../images/icon_home.png) no-repeat 50%;
background-size: 8px;
}
/*slide-end*/
/*分屏*/
h1{
position: absolute;
top: 10%;
left: 0;
width: 100%;
font-size: 29px;
font-weight: 400;
color: #3095ef;
text-align: center;
}
h1 em{
display: block;
text-align: center;
font-size: 15px;
font-style: normal;
color: #686868;
line-height: 24px;
}
.slide p{
position: absolute;
}
.slide p img{
width: 100%;
}
/*page0 begin*/
.item0-0{
top: 47%;
left: 50%;
margin: 33px 0 0 -45px;
width: 90px;
height: 90px;
background:url(../images/0/item0_0.png) no-repeat 0 16px,-webkit-gradient(linear, left top, left bottom, from(rgb(28,135,255)), to(rgb(75, 219, 255)));
background-size:83px auto,100% auto;
border-radius: 50%;
opacity: 0;
-webkit-transform:scale(.9);
-webkit-animation: none;
}
.play .item0-0{
-webkit-transition: all 1s ease-in-out;
opacity: 1;
-webkit-transform:scale(1);
-webkit-animation: item0-0-ac 4s ease-in-out infinite alternate;
}
@-webkit-keyframes item0-0-ac{
0%{
-webkit-transform: translate3d( 2px ,2px , 0);
}
25%{
-webkit-transform: translate3d( 2px ,0 , 0);
}
50%{
-webkit-transform: translate3d( 0 ,2px , 0);
}
75%{
-webkit-transform: translate3d( 0 ,-2px , 0);
}
100% {
-webkit-transform: translate3d( -2px ,-2px , 0);
}
}
.play .item0-1{
top: 47%;
left: 50%;
margin: 33px 0 0 -45px;
width: 89px;
height: 89px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffe438), to(#ff8823));
border-radius: 50%;
opacity: 0;
webkit-transition: opacity 5s ease-in-out;
-webkit-animation: circleRotate 3s .9s ease-in-out both infinite alternate;
-webkit-transform-origin: 40px 48px;
}
@-webkit-keyframes circleRotate{
0%{
-webkit-transform : rotate(0deg);
}
1%{
opacity: 1;
}
100%{
-webkit-transform : rotate(360deg);
opacity: 1;
}
}
.play .item0-2{
top: 47%;
left: 50%;
margin: 33px 0 0 -45px;
width: 89px;
height: 89px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffa049), to(#ff6095));
border-radius: 50%;
opacity: 0;
-webkit-animation: circleRotate 4s 1.5s ease-in-out both infinite alternate;;
-webkit-transform-origin: 45px 37px;
}
.play .item0-3{
top: 47%;
left: 50%;
margin: 34px 0 0 -44px;
width: 89px;
height: 89px;
background:-webkit-gradient(linear, left top, left bottom, from(#52f5e4), to(#00ccb1));
border-radius: 50%;
opacity: 0;
-webkit-animation: circleRotate 5s 2s ease-in-out both infinite alternate;;
-webkit-transform-origin: 45px 50px;
}
.item0-4{
opacity: 0;
-webkit-transition: opacity 2.5s ease 1s;
}
.play .item0-4{
top: 47%;
left: 50%;
margin: 97px 0 0 -92px;
width: 17px;
height: 17px;
background:-webkit-gradient(linear, left top, left bottom, from(#46b0ff), to(#46b0ff));
border-radius: 50%;
opacity: 1;
-webkit-animation: shock 5.3s 1s ease-in-out infinite alternate;
}
.item0-5{
opacity: 0;
-webkit-transition: opacity 2.5s ease 1s;
}
.play .item0-5{
top: 41%;
left: 50%;
margin: 80px 0 0 53px;
width: 24px;
height: 24px;
background:-webkit-gradient(linear, left top, left bottom, from(#a7f129), to(#2bd9bb));
border-radius: 50%;
opacity: 1;
-webkit-animation: shock 5s .9s ease-in-out infinite alternate ;
}
.item0-6{
opacity: 0;
-webkit-transition: opacity 2.5s ease 1s;
}
.play .item0-6{
top: 50%;
left: 50%;
width: 10px;
height: 10px;
margin: 101px 0 0 49px;
background:#ff6b88;
border-radius: 50%;
opacity: 1;
-webkit-animation: shock 6s 1.1s ease-in-out infinite alternate;
}
.item0-7{
opacity: 0;
-webkit-transition: opacity 2.5s ease 1s;
}
.play .item0-7{
top: 50%;
left: 50%;
width: 7px;
height: 7px;
margin: 75px 0 0 85px;
background:#8b92ff;
border-radius: 50%;
opacity: 1;
-webkit-animation: shock 4s 1.1s ease-in-out infinite alternate;
}
.item0-8{
opacity: 0;
-webkit-transition: opacity 2.5s ease 1s;
}
.play .item0-8{
top: 50%;
left: 50%;
margin: 54px 0 0 -85px;;
width: 7px;
height: 7px;
background: #ffdc36;
border-radius: 50%;
opacity: 1;
-webkit-animation: shock 4.3s .6s ease-in-out infinite alternate;
}
@-webkit-keyframes shock{
0%{
-webkit-transform : translate3d(0 , 0 , 0);
}
30%{
-webkit-transform : translate3d(10px , 10px , 0);
}
60%{
-webkit-transform : translate3d(8px , 14px , 0);
}
100%{
-webkit-transform : translate3d(6px , 9px , 0);
}
}
/*page0 end*/
/*page1 start*/
.play .item1-1,
.play .item1-7{
top: 58%;
left: 50%;
margin: 0 0 0 -135px;
width: 271px;
height: 54px;
background: url(../images/1/item7_1.png) no-repeat 50% 0;
background-size: 271px;
-webkit-animation: skin_phone .8s .2s both;
}
.play .item1-7{
background-image: url(../images/1/item7_7.png);
}
.item1-2,
.item1-3,
.item1-4,
.item1-5{
top: 58%;
left: 50%;
width: 53px;
height: 53px;
line-height: 53px;
text-align: center;
color: #fff;
border-radius: 50%;
font-family: 'Microsoft Yahei';
font-size: 15px;
}
.item1-2{
margin: -31px 0px 0 -86px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffbb04), to(#ff903c));
opacity: 0;
}
.play .item1-2{
-webkit-transition: all .7s 1s ease-out;
-webkit-animation: scaleOut .3s 2.9s ease-out both;
opacity: 1;
margin: -56px 0px 0 -86px;
}
.item1-2:after{
position: absolute;
right: 0;
bottom: -9px;
content: "";
display: block;
width: 27px;
height: 24px;
background: url(../images/1/tick.png);
background-size: 27px 24px;
-webkit-transform : scale(.1);
}
.play .item1-2:after{
-webkit-transition: all .5s ease 3s;
opacity: 1;
-webkit-transform : scale(1);
}
.item1-3{
margin: -15px 0px 0 27px;
background:-webkit-gradient(linear, left top, left bottom, from(#adf237), to(#2dd9b9));
opacity: 0;
}
.play .item1-3{
-webkit-transition: all .7s 1s ease-out;
-webkit-animation: scaleOut .3s 2.6s ease-out both;
opacity: 1;
margin: -40px 0px 0 27px;
}
.item1-3:after{
position: absolute;
right: 0;
bottom: -9px;
content: "";
display: block;
width: 27px;
height: 24px;
background: url(../images/1/tick.png);
background-size: 27px 24px;
opacity: 0;
-webkit-transform : scale(.1);
}
.play .item1-3:after{
-webkit-transition: all .5s ease 2.6s;
opacity: 1;
-webkit-transform : scale(1);
}
.item1-4{
margin: -135px 0px 0 46px;
background:-webkit-gradient(linear, left top, left bottom, from(#439cff), to(#76daff));
opacity: 0;
}
.play .item1-4{
-webkit-transition: all .5s 1s ease-out;
-webkit-animation: scaleOut .3s 2s ease-out both;
opacity: 1;
margin: -145px 0px 0 46px;
}
.item1-4:after{
position: absolute;
right: 0;
bottom: -9px;
content: "";
display: block;
width: 27px;
height: 24px;
background: url(../images/1/tick.png);
background-size: 27px 24px;
opacity: 0;
-webkit-transform : scale(.1);
}
.play .item1-4:after{
-webkit-transition: all .5s ease 1.8s;
opacity: 1;
-webkit-transform : scale(1);
}
.item1-5{
margin: -140px 0px 0 -76px;
background:-webkit-gradient(linear, left top, left bottom, from(#9967fa), to(#fb85d5));
opacity: 0;
}
.play .item1-5 {
-webkit-transition: all .5s 1s ease-out;
opacity: 1;
margin: -156px 0px 0 -76px;
-webkit-animation: scaleOut .3s 1.7s ease-out both;
}
@-webkit-keyframes scaleOut{
0%{
-webkit-transform: scale(1);
}
50%{
-webkit-transform: scale(1.2);
}
100%{
-webkit-transform: scale(1);
}
}
.item1-5:after{
position: absolute;
right: 0;
bottom: -9px;
content: "";
display: block;
width: 27px;
height: 24px;
background: url(../images/1/tick.png);
background-size: 27px 24px;
-webkit-transform : scale(.1);
opacity: 0;
}
.play .item1-5:after{
-webkit-transition: all .5s ease 1.7s;
opacity: 1;
-webkit-transform : scale(1);
}
.item1-6{
top: 50%;
left: 50%;
width: 62px;
height: 62px;
border-radius: 50%;
text-align: center;
line-height: 62px;
margin: -47px 0px 0 -23px;
font-family: 'Microsoft Yahei';
color: #fff;
background:-webkit-gradient(linear, left top, left bottom, from(#ff6e6e), to(#ff2ecb));
opacity: 0;
}
.play .item1-6{
-webkit-transition: all .9s 1s ease-out;
opacity: 1;
margin: -57px 0px 0 -23px;
-webkit-animation: scaleOut .3s 2.3s ease-out both;
}
.item1-6:after{
position: absolute;
right: 0;
bottom: -9px;
content: "";
display: block;
width: 27px;
height: 24px;
background: url(../images/1/tick.png);
background-size: 27px 24px;
-webkit-transform : scale(.1);
}
.play .item1-6:after{
-webkit-transition: all .5s ease 2.3s;
opacity: 1;
-webkit-transform : scale(1);
}
.item1-8{
top: 50%;
left: 50%;
width: 13px;
height: 13px;
border-radius: 50%;
text-align: center;
margin: -5px 0px 0 54px;
background:-webkit-gradient(linear, left top, left bottom, from(#fc4f8b), to(#fda14d));
opacity: 0;
}
.play .item1-8{
-webkit-transition: all .5s 1.8s ease-out;
-webkit-animation: gradientOut 1s .8s ease-out both;
opacity: 1;
-webkit-transform: translateY(-15px);
}
.item1-9{
top: 50%;
left: 50%;
width: 9px;
height: 9px;
border-radius: 50%;
text-align: center;
margin: -115px 0px 0 -15px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffc322), to(#ff9e53));
opacity: 0;
}
.play .item1-9{
-webkit-transition: all .5s 1.8s ease-out;
-webkit-animation: gradientOut 1s .8s ease-out both;
opacity: 1;
-webkit-transform: translateY(-15px);
}
.item1-10{
position: absolute;
left: 50%;
top: 5%;
width: 174px;
height: 60px;
background: url(../images/1/read.png);
background-size: 174px 60px;
margin: 0 0 0 -87px;
}
/*page1 end*/
/*page2 begin*/
.screen2-1{
position: absolute;
top: 50%;
left: 50%;
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
border-radius: 50%;
transform: scale(1);
background: -webkit-gradient(linear, left top, left bottom, from(#6fd7ff), to(#439cff));
opacity: 0;
}
.play .screen2-1{
-webkit-animation: screen2-1 1.4s ease .1s forwards;
}
@-webkit-keyframes screen2-1{
0%{
-webkit-transform: scale(0);
opacity: 0;
}
30%{
-webkit-transform: scale(1);
opacity: 1;
}
70%{
-webkit-transform: scale(1);
opacity: 1;
}
100%{
-webkit-transform: scale(0);
opacity: 0;
}
}
.screen2-2{
position: absolute;
left: 50%;
top: 50%;
width: 35px;
margin: -18px 0 0 -17px;
}
.play .screen2-2{
-webkit-animation: screen2-2 1s linear .2s forwards;
-webkit-transform: origin(22px 20px);
}
@-webkit-keyframes screen2-2{
0%{
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(400deg);
}
}
.screen2-3{
position: absolute;
top: 50%;
left: 50%;
margin: -47px 0 0 -47px;
width: 95px;
opacity: 0;
-webkit-transform: scale(0);
}
.play .screen2-3{
-webkit-transition: all .6s ease 1s;
-webkit-transform: scale(1);
opacity: 1;
}
.screen2-4,.screen2-5,.screen2-6,.screen2-7,.screen2-8,.screen2-9{
position: absolute;
left: 50%;
top: 50%;
display: block;
margin: -28px 0 0 -28px;
opacity: 0;
}
.screen2-4{
width: 56px;
height: 57px;
background: url(../images/2/pop.png);
background-size: 225px 61px;
opacity: 0;
-webkit-transform: translate3d( -10px,-10px ,0) scale(0);
}
.play .screen2-4{
-webkit-transition: all .4s ease 1.2s;
opacity: 1;
-webkit-transform: translate3d( 60px ,-60px ,0) scale(1);;
}
.screen2-5{
width: 61px;
height: 61px;
background: url(../images/2/pop.png) -58px 0;
background-size: 225px 61px;
opacity: 0;
-webkit-transform: translate3d( -10px,-10px ,0) scale(0);
}
.play .screen2-5{
-webkit-transition: all .4s ease 1.2s;
opacity: 1;
-webkit-transform: translate3d( -80px ,80px ,0) scale(1);;
}
.screen2-6{
display: block;
width: 57px;
height: 57px;
background: url(../images/2/pop.png) -120px 0;
background-size: 225px 61px;
opacity: 0;
-webkit-transform: translate3d( -10px,-10px ,0) scale(0);
}
.play .screen2-6{
-webkit-transition: all .4s ease 1.2s;
opacity: 1;
-webkit-transform: translate3d( -45px ,-45px ,0) scale(1);;
}
.screen2-7{
display: block;
width: 46px;
height: 46px;
background: url(../images/2/pop.png) -404px 0;
background-size: 225px 61px;
opacity: 0;
-webkit-transform: translate3d( -10px,-10px ,0) scale(0);
}
.play .screen2-7{
-webkit-transition: all .4s ease 1.2s;
opacity: 1;
-webkit-transform: translate3d( 70px ,70px ,0) scale(1);;
}
.screen2-8{
display: block;
width: 13px;
height: 13px;
border-radius: 50%;
background: -webkit-gradient(linear, left top, left bottom, from(#ffb321), to(#fc7f39));
opacity: 0;
-webkit-transform: translate3d( 30px,-10px ,0) scale(0);
}
.play .screen2-8{
-webkit-transition: all .5s ease 1.4s;
opacity: 1;
-webkit-transform: translate3d( 80px ,35px ,0) scale(1);;
}
.screen2-9{
display: block;
width: 13px;
height: 13px;
border-radius: 50%;
background: -webkit-gradient(linear, left top, left bottom, from(#9c6bfa), to(#fb88d6));
opacity: 0;
-webkit-transform: translate3d( 10px,-10px ,0) scale(0);
}
.play .screen2-9{
-webkit-transition: all .5s ease 1.4s;
opacity: 1;
-webkit-transform: translate3d( -10px ,-80px ,0) scale(1);;
}
.screen2-10{
position: absolute;
top: 5%;
left: 50%;
width: 190px;
height: 59px;
background: url(../images/2/5000w.png);
background-size: 190px 59px;
margin: 0 0 0 -85px;
}
/*page2 end*/
/*page3 start*/
.play .item2-1{
top: 36%;
left: 50%;
margin: 0 0 0 -83px;
width: 31px;
height: 31px;
background:-webkit-gradient(linear, left top, left bottom, from(#a7f129), to(#2bd9bb));
border-radius: 50%;
-webkit-animation: item2-5-ac .6s 1.3s ease-in-out both;
}
.play .item2-2{
top: 31%;
left: 50%;
margin: 0 0 0 38px;
width: 46px;
height: 46px;
background:-webkit-gradient(linear, left top, left bottom, from(#ff6e6e), to(#ff2ecb));
border-radius: 50%;
-webkit-animation: item2-5-ac .6s 2.0s ease-in-out both;
}
.play .item2-3{
top: 52%;
left: 50%;
width: 44px;
height: 44px;
background:url(../images/2/item2_3.png) no-repeat 50%,-webkit-gradient(linear, left top, left bottom, from(rgba(28,135,255,0.9)), to(rgba(75, 219, 255,0.9)));
background-size:23px auto,100% auto;
border-radius: 50%;
-webkit-animation: item2-3-ac 1.6s .1s ease-in-out both;
}
@-webkit-keyframes item2-3-ac{
0%{opacity: 0;-webkit-transform:translate3d(-22px,-144px, 0);}
20% { opacity: 1;-webkit-transform:translate3d(-22px,60px, 0);}
30% { opacity: 1;-webkit-transform:translate3d(-22px,-44px, 0);}
45% { opacity: 0;-webkit-transform:translate3d(-22px,-44px, 0) scale(1.6);}
46% { opacity: 0;-webkit-transform:translate3d(44px,0px, 0);}
99% { opacity: 0;-webkit-transform:translate3d(44px,0px, 0);}
100% { opacity: 1;-webkit-transform:translate3d(44px,0px, 0);}
}
.play .item2-4{
top: 58%;
left: 50%;
margin: 0 0 0 -105px;
width: 45px;
height: 45px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffa148), to(#ff5f96));
border-radius: 50%;
-webkit-animation: item2-5-ac .6s 1.8s ease-in-out both;
}
.play .item2-5{
top: 38%;
left: 50%;
margin: 0 0 0 -47px;
width: 95px;
height: 95px;
background:url(../images/2/item2_5.png) no-repeat 50% 60%,-webkit-gradient(linear, left top, left bottom, from(#ffa904), to(#fc6d1f));
background-size: 62px 55px, 100%;
border-radius: 50%;
-webkit-animation: item2-5-ac .3s .9s ease-in-out both;
}
@-webkit-keyframes item2-5-ac{
0%{opacity: 0;-webkit-transform: scale(.8);}
100% {}
}
.item2-6{
position: absolute;
left: 50%;
top: 5%;
width: 169.5px;
height: 52.5px;
background: url(../images/2/xiaoshuo.png);
background-size: 169.5px 52.5px;
margin: 0 0 0 -85px;
-webkit-transform: scale(1.2);
}
/*page3 end*/
/*page4 begin*/
.play .item3-1{
top: 33%;
left: 56%;
width: 30px;
height: 30px;
background:-webkit-gradient(linear, left top, left bottom, from(#2f91ff), to(#5fd4ff));
border-radius: 50%;
-webkit-animation: item3-1-ac .5s 1.3s ease-in-out both;
}
@-webkit-keyframes item3-1-ac{
0%{ opacity: 0; -webkit-transform:translate3d(-18px,18px, 0);}
100% {}
}
.play .item3-2{
top: 45%;
left: 50%;
margin: 0 0 0 37px;
width: 53px;
height: 53px;
background:-webkit-gradient(linear, left top, left bottom, from(#7f52ff), to(#fb78d0));
border-radius: 50%;
-webkit-animation: item3-2-ac .5s 1.3s ease-in-out both;
}
@-webkit-keyframes item3-2-ac{
0%{ opacity: 0; -webkit-transform:translate3d(-18px,0px, 0);}
100% {}
}
.play .item3-3{
top: 38%;
left: 50%;
margin: 0 0 0 -110px;
width: 78px;
height: 78px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffa148), to(#ff5f96));
border-radius: 50%;
-webkit-animation: item3-3-ac .5s 1.3s ease-in-out both;
}
@-webkit-keyframes item3-3-ac{
0%{ opacity: 0; -webkit-transform:translate3d(18px,8px, 0);}
100% {}
}
.play .item3-4{
top: 59%;
left: 50%;
margin: 0 0 0 -80px;
width: 46px;
height: 46px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffa904), to(#fc6d1f));
border-radius: 50%;
-webkit-animation: item3-4-ac .5s 1.3s ease-in-out both;
}
@-webkit-keyframes item3-4-ac{
0%{ opacity: 0; -webkit-transform:translate3d(18px,-18px, 0);}
100% {}
}
.play .item3-5{
top: 60%;
left: 50%;
margin: 0 0 0 57px;
width: 36px;
height: 36px;
background:-webkit-gradient(linear, left top, left bottom, from(#ff6e6e), to(#ff2ecb));
border-radius: 50%;
-webkit-animation: item3-5-ac .5s 1.3s ease-in-out both;
}
@-webkit-keyframes item3-5-ac{
0%{ opacity: 0; -webkit-transform:translate3d(-18px,-18px, 0);}
100% {}
}
.play .item3-6{
top: 43%;
left: 50%;
margin: 0 0 0 -45px;
width: 89px;
height: 89px;
-webkit-animation: item3-6-ac .4s ease-in-out both;
}
@-webkit-keyframes item3-6-ac{
0%{ opacity: 0; -webkit-transform:scale(.8);}
100% {}
}
.play .item3-6-bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:-webkit-gradient(linear, left top, left bottom, from(rgba(82,232,203,.9)), to(rgba(88,200,250,.9)));
border-radius: 50%;
-webkit-animation: item3-6-bg-ac .6s .8s ease-in-out both;
}
@-webkit-keyframes item3-6-bg-ac{
0%{}
50%{ -webkit-transform:scale(.94);}
100% {}
}
.play .item3-6-top{
position: absolute;
top: 18px;
left: 17px;
width: 56px;
height: 10px;
background: url(../images/3/item3_6_top.png) no-repeat 0 0;
background-size: 56px 10px;
-webkit-animation: item3-6-top-ac .6s .8s ease-in-out both;
}
@-webkit-keyframes item3-6-top-ac{
0%{}
50%{ -webkit-transform: rotate(-5deg);-webkit-transform-origin:5px 5px;}
100% {}
}
.play .item3-6-bottom{
position: absolute;
top: 22px;
left: 17px;
width: 56px;
height: 48px;
background: url(../images/3/item3_6_bottom.png) no-repeat 0 0;
background-size: 56px 48px;
-webkit-animation: item3-6-bottom-ac .6s .8s ease-in-out both;
}
@-webkit-keyframes item3-6-bottom-ac{
0%{}
50%{ -webkit-transform: rotate(5deg);-webkit-transform-origin:0px 5px;}
100% {}
}
.item3-7{
position: absolute;
top: 5%;
left: 50%;
width: 174px;
height: 62px;
background: url(../images/3/zhuiju.png);
background-size: 174px 62px;
margin: 0 0 0 -87px;
}
/*page3 end*/
/*page4 begin*/
.play .item4-1{
top: 60%;
left: 50%;
margin: 0 0 0 -96px;
width: 192px;
height: 80px;
-webkit-animation: item4-1-ac .4s ease-in-out both;
background: url(../images/4/item4_1.png) no-repeat 50%;
background-size: 192px 80px;
}
@-webkit-keyframes item4-1-ac{
0%{ opacity: 0; -webkit-transform:scale(.8);}
100% {}
}
.play .item4-2{
top: 51%;
left: 50%;
margin: 0 0 0 -30px;
width: 57px;
height: 57px;
background: url(../images/4/item4_2.png) no-repeat 50% 60%,-webkit-gradient(linear, left top, left bottom, from(#fd9938), to(#fc4b89));
background-size: 51px 26px,100%;
border-radius: 50%;
-webkit-animation: item4-l-ac .4s .3s ease-in-out both;
}
.play .item4-3{
top: 43%;
left: 50%;
margin: 0 0 0 6px;
width: 39px;
height: 39px;
background: url(../images/4/item4_3.png) no-repeat 50%,-webkit-gradient(linear, left top, left bottom, from(#1c87ff), to(#4bdbff));
background-size: 22px 22px,100%;
border-radius: 50%;
-webkit-animation: item4-r-ac .4s .4s ease-in-out both;
}
.play .item4-4{
top: 41%;
left: 50%;
margin: 0 0 0 -55px;
width: 42px;
height: 42px;
background: url(../images/4/item4_4.png) no-repeat 50% 60%,-webkit-gradient(linear, left top, left bottom, from(#ff9332), to(#ffe32d));
background-size: 27px auto,100%;
border-radius: 50%;
-webkit-animation: item4-l-ac .4s .5s ease-in-out both;
}
.play .item4-5{
top: 36%;
left: 50%;
margin: 0 0 0 -2px;
width: 31px;
height: 31px;
background: -webkit-gradient(linear, left top, left bottom, from(#00d2b1), to(#9cf10b));
border-radius: 50%;
-webkit-animation: item4-r-ac .4s .6s ease-in-out both;
}
.play .item4-6{
top: 34%;
left: 50%;
margin: 0 0 0 -26px;
width: 17px;
height: 17px;
background: -webkit-gradient(linear, left top, left bottom, from(#7f52ff), to(#fb78d0));
border-radius: 50%;
-webkit-animation: item4-l-ac .4s .7s ease-in-out both;
}
.play .item4-7{
top: 30%;
left: 50%;
width: 9px;
height: 9px;
background: #fc6d66;
border-radius: 50%;
-webkit-animation: item4-r-ac .4s .75s ease-in-out both;
}
@-webkit-keyframes item4-l-ac{
0%{ opacity: 0; -webkit-transform:translate3d(3px,3px, 0);}
100% {}
}
@-webkit-keyframes item4-r-ac{
0%{ opacity: 0; -webkit-transform:translate3d(-3px,3px, 0);}
100% {}
}
/*page4 end*/
/*page5 begin*/
.play .item5-1{
top: 41%;
left: 50%;
width: 140px;
height: 140px;
margin-left: -85px;
border-radius: 50%;
background:-webkit-gradient(linear, left top, left bottom, from(#1c87ff), to(#4bdbff));
background-size: 140px 140px;
-webkit-animation: item5-1-ac .4s .4s ease-in-out both;
}
@-webkit-keyframes item5-1-ac{
0%{ opacity: 0; -webkit-transform:scale(.6);}
100% {}
}
.play .item5-2{
top: 41%;
left: 50%;
width: 95px;
height: 190px;
margin: -65px 0 0 -52px;
background:url(../images/5/item5_2.png) no-repeat 0 0;
-webkit-animation: item5-2-ac .4s 1s ease-in-out both;
overflow: hidden;
background-size: 95px 190px;
}
@-webkit-keyframes item5-2-ac{
0%{ background-position: -85px 190px;}
100% { background-position: 0 0;}
}
.play .item5-3{
top: 41%;
left: 50%;
width: 140px;
height: 140px;
margin-left: -85px;
border-radius: 50%;
background:url(../images/5/item5_3.png) no-repeat 50%;
background-size: 140px 140px;
-webkit-animation: item5-3-ac .3s .6s ease-in-out both;
}
@-webkit-keyframes item5-3-ac{
0%{ opacity: 0;}
100% {}
}
/*page5 end*/
/*page6 begin*/
.play .item6-1{
top: 41%;
left: 50%;
margin: 82px 0 0 4px;
width: 86px;
height: 86px;
border-radius: 50%;
background: -webkit-gradient(linear, left top, left bottom, from(#f09b45), to(#fc4b88));
-webkit-animation: item6-1-ac .4s ease-in-out both;
}
@-webkit-keyframes item6-1-ac{
0%{ opacity: 0; -webkit-transform:translate3d(0,-200px, 0) scale(.3);}
80%{ opacity: 1;-webkit-transform:translate3d(0,0,0) scale(.3);}
100% {}
}
.play .item6-2{
top: 41%;
left: 50%;
margin: 82px 0 0 11px;
width: 71px;
height: 88px;
background: url(../images/6/item6_2.png) no-repeat 50%;
background-size: 44px;
-webkit-animation: item6-2-ac .4s .4s ease-in-out both;
}
@-webkit-keyframes item6-2-ac{
0%{ opacity: 0; -webkit-transform: rotate(172deg);}
100%{}
}
.play .item6-3{
top: 41%;
left: 50%;
margin: 121px 0 0 45px;
width: 5px;
height: 5px;
border: 1px solid #fff;
background: #2bd9bb;
border-radius: 50%;
-webkit-animation: item6-3-ac 2s 1.4s ease-in-out both infinite;
}
@-webkit-keyframes item6-3-ac{
0%{ opacity: 0;}
1%{opacity:1;-webkit-transform:translate3d(0,0px, 0);}
20%{opacity: 1; -webkit-transform:translate3d(0,25px, 0); background: #fff;}
21%{ opacity: 0;}
100%{ opacity: 0;}
}
.item6-4{
position: absolute;
top: 5%;
left: 50%;
width: 217px;
height: 62px;
background: url(../images/5/liuliang.png);
background-size: 217px 62px;
margin: 0 0 0 -108px;
}
.item6-5{
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
border-radius: 50%;
background: -webkit-gradient(linear, left top, left bottom, from(#9057f9), to(#fb78d0));
margin: 0px 0 0 50px;
opacity: 0;
-webkit-transition: all .6s 1s ease;
}
.play .item6-5{
opacity: 1;
-webkit-transform: translate3d(20px , -20px , 0);
}
/*page6 end*/
/*page7 begin*/
.item7-2,.item7-3,.item7-4,.item7-5,.item7-6{
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
}
.item7-1{
position: absolute;
top: 50%;
left: 50%;
width: 185px;
height: 138px;
margin: -158px 0 0 -91px;
background: url(../images/last/slogan-0820.png);
background-size: 185px 138px;
}
.item7-2{
position: absolute;
top: 50%;
left: 50%;
width: 25px;
height: 25px;
border-radius: 50%;
background:-webkit-gradient(linear, left top, left bottom, from(#288dff), to(#53dcff));
margin: -3px 0 0 -137px;
opacity: 0;
-webkit-transition: all 1s ease .5s;
}
.play .item7-2{
opacity: 1;
-webkit-transform: translate3d(0 , -20px , 0);
-webkit-animation: tinyShock 8s 2s linear infinite alternate;
}
.item7-3{
top: 55% !important;
width: 15px;
height: 15px;
background:-webkit-gradient(linear, left top, left bottom, from(#ff9332), to(#ffe22d));
margin: 140px 0 0 57px;
opacity: 0;
-webkit-transition: all 1s ease .5s;
}
.play .item7-3{
opacity: 1;
-webkit-transform: translate3d(0 , -20px , 0);
-webkit-animation: tinyShock 9s 1s linear infinite alternate;
}
.item7-4{
top: 55% !important;
width: 6px;
height: 6px;
background:-webkit-gradient(linear, left top, left bottom, from(#06d3b3), to(#96ef1a));
margin: 108px 0 0 100px;
opacity: 0;
-webkit-transition: all 1s ease .5s;
}
.play .item7-4{
opacity: 1;
-webkit-transform: translate3d(0 , -20px , 0);
-webkit-animation: tinyShock 10s 1.5s linear infinite alternate;
}
.item7-5{
width: 10px;
height: 10px;
background:-webkit-gradient(linear, left top, left bottom, from(#955cf8), to(#fb7bd1));
margin: -86px 0 0 111px;
opacity: 0;
-webkit-transition: all 1s ease .5s;
}
.play .item7-5{
opacity: 1;
-webkit-transform: translate3d(0 , -20px , 0);
-webkit-animation: tinyShock 12s 3s linear infinite alternate;
}
.item7-6{
width: 89px;
height: 89px;
background:-webkit-gradient(linear, left top, left bottom, from(#ff7171), to(#ff32cc));
margin: -182px 0 0 120px;
opacity: 0;
-webkit-transition: all 1s ease .5s;
}
.play .item7-6{
opacity: 1;
-webkit-transform: translate3d(0 , -20px , 0);
-webkit-animation: tinyShock 7s 1.3s linear infinite alternate;
}
@-webkit-keyframes tinyShock{
0%{
-webkit-transform: translate3d( 0 , -20px , 0);
}
25%{
-webkit-transform: translate3d( -5px , -5px , 0);
}
50%{
-webkit-transform: translate3d( 5px , -5px , 0);
}
75%{
-webkit-transform: translate3d( 5px , 5px , 0);
}
100%{
-webkit-transform: translate3d( -5px , 5px , 0);
}
}
/*page7 end*/
/*page8 begin*/
/* add by cjx */
.play .item8-0{
top: 56%;
left: 50%;
width: 270px;
height: 108px;
margin-left: -135px;
background: url(../images/8/skin_phone.png) no-repeat;
background-size: 270px auto;
}
.play .item8-1 {
top: 50%;
left: 50%;
width: 53px;
height: 53px;
margin-left: -22px;
margin-top: -110px;
background: url(../images/8/create.png) 15px 8px no-repeat,-webkit-gradient(linear, left top, left bottom, from(rgba(95,212,255,0.9)), to(rgba(47, 145, 255,0.9)));
background-size: 21px auto,100% auto;
border-radius: 50%;
-webkit-animation: 1s 1.4s item8-1-ac both;
}
@-webkit-keyframes item8-1-ac{
0%{ opacity: 0;-webkit-transform: translate3d(-10px,50px,0) scale(.8);}
100% {}
}
.item8-1-1{
display: none;
}
.play .item8-1-1{
display: inline-block;
position: absolute;
top: 32px;
width: 50px;
left: 6px;
color: white;
font-size: 10px;
font-family: "Microsoft Yahei";
}
.play .item8-2{
top: 50%;
left: 50%;
width: 71px;
height: 71px;
margin-left: -75px;
margin-top: -46px;
background:-webkit-gradient(linear, left top, left bottom, from(rgba(118,128,140,1)), to(rgba(64, 63, 89,1)));
background-size:100% auto;
border-radius: 50%;
-webkit-animation: 1s item8-2-ac .6s both;
}
@-webkit-keyframes item8-2-ac{
0%{ opacity: 0;-webkit-transform: translate3d(15px,30px,0) scale(.8);}
100% {}
}
.play .item8-2-1 {
display: block;
margin: 10px 0 0 30px;
width: 26px;
height: 26px;
background: #ffe700;
border-radius: 50%;
-webkit-animation:3s 0.5s item8-2-1-ac alternate infinite ease-in-out;
}
@-webkit-keyframes item8-2-1-ac{
0%{}
100% {-webkit-transform: translate3d(-5px,0,0);}
}
.play .item8-2-2 {
display: block;
margin: -20px 0 0 14px;
width: 41px;
height: 29px;
background: url(../images/8/wether_cloud.png) no-repeat;
background-size: 100% auto;
-webkit-animation:3s 0.5s skin_wether_cloud alternate infinite ease-in-out;
}
@-webkit-keyframes skin_wether_cloud{
0%{}
100% {-webkit-transform: translate3d(4px,0,0);}
}
.item8-2-3{
display: none;
}
.play .item8-2-3{
display: inline-block;
position: absolute;
top: 50px;
width: 50px;
left: 23px;
color: white;
font-size: 12px;
font-family: "Microsoft Yahei";
}
.play .item8-3 {
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-left: -10px;
border-radius: 50%;
-webkit-animation: 1s 0.2s item8-3-ac both;
overflow: hidden;
z-index: 5;
}
@-webkit-keyframes item8-3-ac{
0%{ opacity: 0;-webkit-transform:translate3d(0,30px,0) scale(.8);}
100% {}
}
.play .skin_phone {
-webkit-animation:0.5s skin_phone;
opacity: 1;
}
@-webkit-keyframes skin_phone{
0%{ opacity: 0;-webkit-transform: translateY(30px) scale(.8);}
100% { opacity: 1;-webkit-transform: translateY(0px) scale(1);}
}
.play .skin_moon {
-webkit-animation:0.7s 0.4s skin_moon;
opacity: 1;
}
.play .item8-3-1 {
display: block;
width: 100%;
height: 100%;
background:url(../images/8/cloth_bg.png) center no-repeat;
background-size: 30px auto;
border-radius: 50%;
-webkit-animation: .8s 2s item8-3-1-ac ease-out both;
}
@-webkit-keyframes item8-3-1-ac{
0%{ background:url(../images/8/cloth_bg.png) center no-repeat;}
100% { background:url(../images/8/cloth_bg2.png) center no-repeat;}
}
.play .item8-3-2{
display: block;
width: 100%;
height: 100%;
margin-top: -112%;
background: url(../images/8/cloth.png) center no-repeat;
background-size: 30px auto;
-webkit-animation:0.8s 2s item8-3-2-ac ease-out;
}
@-webkit-keyframes item8-3-2-ac{
0%{ opacity: 1;}
35%{opacity: 0;}
100%{ opacity: 0; background-position: 200% 50%;}
}
.play .item8-3-3 {
display: block;
width: 100%;
height: 100%;
margin-top: -100%;
background: url(../images/8/cloth.png) center no-repeat;
background-size:30px auto;
-webkit-animation:0.8s 2s item8-3-3-ac ease-out both;
opacity: 0;
}
@-webkit-keyframes item8-3-3-ac{
50%{ opacity: 0; background-position: -100% 50%;}
100%{ opacity: 1; background-position: 50% 50%;}
}
.item8-3-4{
display: none;
}
.play .item8-3-4{
display: inline-block;
position: absolute;
top: 40px;
left: 19px;
color: white;
font-size: 12px;
font-family: "Microsoft Yahei";
}
.play .item8-4 {
top: 50%;
left: 50%;
width: 58px;
height: 58px;
margin-left: 26px;
margin-top: -40px;
background: url(../images/8/smile.png) 17px 9px no-repeat,-webkit-gradient(linear, left top, left bottom, from(rgba(255,181,40,0.9)), to(rgba(252, 129, 69,0.9)));
background-size: 25px auto,100% auto;
border-radius: 50%;
-webkit-animation: 1s 1s item8-1-ac both;
}
@-webkit-keyframes item8-1-ac{
0%{ opacity: 0;-webkit-transform: translate3d(-10px,50px,0) scale(.8);}
100% {}
}
.item8-4-1{
display: none;
}
.play .item8-4-1{
display: inline-block;
position: absolute;
top: 38px;
left: 17px;
color: white;
font-size: 12px;
font-family: "Microsoft Yahei";
}
.item8-5{
position: absolute;
top: 5%;
left: 50%;
width: 227px;
height: 62px;
background: url(../images/8/uc.png);
background-size: 227px 62px;
margin: 0 0 0 -113px;
}
/*底部信息*/
#footer_tips{
width: 280px;
height: 18px;
padding: 0 4px 0 4px;
position: absolute;
left: 50%;
bottom: 38px !important;
margin-left: -140px;
border-bottom: 1px solid #babdd4;
text-align: center;
}
#footer_tips a{
font-size: 9.5px;
color: #4d558f;
}
#footer_tips span{
position: absolute;
top: 4px;
left: 66px;
font-size: 12px;
color: #babdd4;
margin-top: 22px;
margin-left: 8px;
}
#footer_tips :nth-child(1){
float: left;
}
#footer_tips :nth-child(2){
float: right;
}
#footer_tips .current {
-webkit-transition: all .3s ease .3s;
-webkit-backface-visibility: hidden;
opacity: 1;
}
/*page8 end*/
/*pageuc begin*/
.itemuc-0{
top: 23%;
left: 50%;
margin: 0 0 0 -150px;
width: 280px;
font-size: 13px;
color: #686868;
line-height: 24px;
}
.itemuc-0 strong{
font-weight: normal;
color: #3095ef;
}
.itemuc-0 em{
font-style: normal;
color: #3095ef;
}
.itemuc-1{
top:50%;
left: 50%;
margin: 0 0 0 -50px;
width: 100px;
height: 100px;
border-radius: 50%;
background: url(../images/uc/itemuc_1.png) no-repeat 50%,-webkit-gradient(linear, left top, left bottom, from(#1c87ff), to(#4bdbff));
background-size: 62px auto,100%;
}
/*pageuc end*/
.top{
position: absolute;
bottom: 10px;
right: 10px;
width: 30px;
height: 30px;
border-radius: 15px;
background: url(../images/top.png) no-repeat 50%,rgba(217,217,217,.8);
background-size: 30px 30px,100%;
}
</style>
<div id="slide" class="slide" style="height: 667px;">
<ul id="slide_ul" class="cf">
<li class="" style="opacity: 0; height: 667px; z-index: 20;">
<h1><img width="185px" src="http://wap3.ucweb.com/public/pdia_res/chinese/iphonewap/106/images/0/h1-0820.png"></h1>
<p class="item0-1"></p>
<p class="item0-2"></p>
<p class="item0-3"></p>
<p class="item0-4"></p>
<p class="item0-5"></p>
<p class="item0-6"></p>
<p class="item0-7"></p>
<p class="item0-8 "></p>
<p class="item0-0"></p>
<div class="active">
<a class="active-link" >
<h4></h4>
<h3></h3>
</a>
</li>
<li>
222222222222222
</li>
<li>
333
</li>
</ul>
<div id="slide_point" class="slide-point" style="display: block;"> //右侧 小点
<span class="current"></span>
<span class=""></span>
<span class=""></span>
</div>
<div id="mybtn" class="mybtn">asd</div>
http://wap.uc.cn/packinfo/chinese_999/ucbrowser/pf/41?uc_param_str=vepffrbiuplaei&r=main&from=wap-atb-mobile&plang=
<script>
function Slide(wrap,cont,point,tag){
this.winW = document.documentElement.clientWidth;
this.winH = document.documentElement.clientHeight;
this.wrap = document.getElementById(wrap);
this.cont = document.getElementById(cont);
this.cont_li = this.cont.getElementsByTagName("li");
this.slide_points = document.getElementById(point).getElementsByTagName(tag);
this.startN = 0;
this.prev = 1;
this.startX = 0;
this.startY = 0;
this.endX = 0;
this.transX = 0;
this.transY = 0;
}
Slide.prototype = {
init:function(){
this.startN = 0;
this.cont_li[0].className = 'play';
this.cont_li[0].style.opacity = 1;
for(var i=1;i<this.cont_li.length;i++){
this.cont_li[i].style.webkitTransform = 'translate3d(0,'+this.winH+'px,0)';
}
this.resize();
this.addHandler(this.wrap,"touchstart",this.bind_fn(this,this.touch_start));
this.addHandler(this.wrap,"touchmove",this.bind_fn(this,this.touch_move));
this.addHandler(this.wrap,"touchend",this.bind_fn(this,this.touch_end));
},
resize : function(){
this.winH = document.documentElement.clientHeight;
document.body.style.height=this.wrap.style.height = this.winH+"px";
for(var i=0;i<this.cont_li.length;i++){
this.cont_li[i].style.height = this.winH+'px';
}
},
addHandler : function(elem,evtype,fn){
if(elem.attachEvent){
elem.attachEvent('on'+evtype,fn);
}else if(elem.addEventListener){
elem.addEventListener(evtype,fn,false);
}else{
elem["on"+evtype] = fn;
}
},
bind_fn : function(obj,func){
return function(){
func.apply(obj,arguments);
};
},
touch_start : function(e){
if(!event.touches.length) return;
var touch = event.touches[0];
this.startX = touch.pageX;
this.startY = touch.pageY;
},
touch_move : function(e){
if(!event.touches.length) return;
e.preventDefault();
var touch = event.touches[0];
this.transX = this.startX-touch.pageX;
this.transY = this.startY-touch.pageY;
if(Math.abs(this.transY)>Math.abs(this.transX)){
this.transY = this.startY-touch.pageY;
this.prev = this.transY/Math.abs(this.transY);
var index = this.startN+this.prev;
if(typeof this.cont_li[index] != 'undefined'){
this.cont_li[index].style.opacity = 1;
this.cont_li[index].style.zIndex = 50;
this.cont_li[index].style.webkitTransitionDuration = 0;
this.cont_li[index].style.webkitTransform = "translate3d(0,"+(this.prev*this.winH-(this.transY))+"px,0)";
this.cont_li[this.startN].style.zIndex=20;
}
}
},
touch_end : function(){
if(Math.abs(this.transY)>Math.abs(this.transX) && Math.abs(this.transY)>50){
this.cont_li[this.startN].className = '';
this.play(this.startN+this.prev);
}else{
this.play(this.startN);
}
this.transY = this.transX = 0;
},
play : function(n){
var _=this;
if(n>=this.cont_li.length){
n = this.cont_li.length-1;
}
if(n<0){
n = 0;
}
if(typeof this.cont_li[n] != 'undefined'){
this.cont_li[_.startN].style.zIndex = 20;
this.cont_li[n].className = 'play';
this.cont_li[n].style.webkitTransitionDuration = '300ms';
this.cont_li[n].style.webkitTransform = 'translate3d(0,0,0)';
this.cont_li[n].style.opacity=1;
this.cont_li[n].style.zIndex = 50;
this.slide_point(n);
// var download = document.getElementById('mybtn');
// console.log(n)
// if(n == 7){
// download.style.marginTop = '-70px';
// }
// else{
// download.style.marginTop = '0px';
// }
setTimeout(function(){
_.startN = n;
if(_.startN+_.prev>=0 && _.startN+_.prev<=_.cont_li.length){
_.cont_li[_.startN-_.prev].style.opacity = 0;
}
},300);
}
if(n === 0){
document.getElementById('slide_point').style.display = 'none';
}else{
document.getElementById('slide_point').style.display = 'block';
}
},
slide_point : function(n){
for(var i=0;i<this.cont_li.length;i++){
this.slide_points[i].className = "";
}
this.slide_points[n].className = "current";
}
};
var slide1 = new Slide("slide","slide_ul","slide_point","span");
slide1.init();
window.onresize = function(){
slide1.resize();
};
//圆转动
</script>
</body>
</html>
