uc 下载页面记录备份

记录一下

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

posted @ 2017-08-17 14:42 surfaces 阅读(427) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

surfaces

uc 下载页面 记录备份

记录一下

uc 下载页面记录备份