记录一下

<!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>

  

<!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>

uc 下载页面 记录备份的更多相关文章

  1. cocoaPods下载使用记录

    cocoaPods下载使用记录 参考地址: 如何在Mac OS 上安装运行Ruby运行环境 http://www.cnblogs.com/daguo/p/4097263.html cocoaPods安 ...

  2. JS判断是否是微信页面,判断手机操作系统(ios或android)并跳转到不同下载页面

    JS判断客户端是否是iOS或者Android 参考:http://caibaojian.com/browser-ios-or-android.html function is_weixin() { v ...

  3. h5页面唤起app(iOS和Android),没有安装则跳转下载页面

    浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app.因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app. 微信里屏蔽了 schema 协议,如果在微信中打开h5, ...

  4. Asp.Net下载页面,并弹出下载提示框

    Asp.Net下载页面,并弹出下载提示框.在删除按钮里调用以下方法.

  5. secureCRT简单上传、下载文件记录

    secureCRT简单上传.下载文件记录: 1)sz下载 -y 覆盖 2)rz上传 -y 覆盖 3)以上两个命令属于安装时包含在“Dial-up Networking Support"组中 ...

  6. WordPress独立下载页面与演示插件:xydown

    我的博客是个资源分享的网站,所以需要提供下载,之前一直是在内容里直接添加个下载链接,感觉不是很美观,而且也麻烦,所以今天找了下看看有没有可以用的下载插件 xydown,这是一款可以独立下载页面与演示的 ...

  7. 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  8. Photoshop独立安装包下载页面

    下载页面地址:https://helpx.adobe.com/cn/creative-cloud/kb/creative-cloud-apps-download.html

  9. PSU/OPATCH/OJVM下载页面及安装方式(最实用版)

    中文版:数据库 PSU,SPU(CPU),Bundle Patches 和 Patchsets 补丁号码快速参考 (文档 ID 1922396.1) Download Reference for Or ...

随机推荐

  1. python---基础知识回顾(六)网络编程

    python---基础知识回顾(十)进程和线程(进程) python---基础知识回顾(十)进程和线程(多线程) python---基础知识回顾(十)进程和线程(自定义线程池) 一:Socket (一 ...

  2. 线程中wait/notify/notifyAll的用法

    前言 多线程时,最关注的就是线程同步,线程间的同步一般用锁来实现,常见的锁就是synchronized和lock.用了synchronized,就不得不提到wait/notify/notifyAll. ...

  3. bzoj千题计划148:bzoj1537: [POI2005]Aut- The Bus

    http://www.lydsy.com/JudgeOnline/problem.php?id=1537 朴素的转移:dp[i][j]=max(dp[i][j-1],dp[i-1][j])+p[i][ ...

  4. java selenium常用API(WebElement、iFrame、select、alert、浏览器窗口、事件、js) 一

     WebElement相关方法 1.点击操作 WebElement button = driver.findElement(By.id("login")); button.clic ...

  5. Grafana关键词

    The open platform for beautiful analytics and monitoring. data source.panels.apps.dashboards. Organi ...

  6. 【BZOJ】3456: 城市规划 动态规划+多项式求逆

    [题意]求n个点的带标号无向连通图个数 mod 1004535809.n<=130000. [算法]动态规划+多项式求逆 [题解]设$g_n$表示n个点的无向图个数,那么显然 $$g_n=2^{ ...

  7. 20155330 2016-2017-2 《Java程序设计》第八周学习总结

    20155330 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 学习目标 了解NIO 会使用Channel.Buffer与NIO2 会使用日志API.国际化 ...

  8. mysql手工注入步骤

    1.一般用 '  "  ) 等符号来闭合,再用%23(即#)来注释后面语句. 2.查找数据库,先用order by n猜字段,再用union select 1,2,3 ...n%23来查询. ...

  9. iOS学习笔记(1)— UIView 渲染和内容管理

    iOS中应用程序基本上都是基于MVC模式开发的.UIView就是模型-视图-控制器中的视图,在iOS终端上看到的.摸到的都是UIView. UIView在屏幕上定义了一个矩形区域和管理区域内容的接口. ...

  10. Linux XOR.DDoS样本取证特征与清除

    一.取证特征 1)获取进程ID 使用top命令,查看占用内存率最高的十位随机名称进程名(示例:进程名pygdykcrqf) 2)获取进程对应路径 Linux 在启动一个进程时,系统会在/proc下创建 ...