Last active
August 29, 2015 14:08
-
-
Save naoyeye/cc861183c48ee411d410 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>搜狗高速浏览器双十一网购专版-剁手族的福音</title> | |
<meta content="text/html"; charset="utf-8"; http-equiv="Content-Type"/> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1"> | |
<script src="js/zepto.min.js"></script> | |
<style> | |
html,body{ | |
overflow:hidden; | |
width:100%; | |
height:100%; | |
margin:0px; | |
} | |
*{ | |
overflow:hidden; | |
} | |
#box{ | |
overflow:hidden; | |
width:100%; | |
height:100%; | |
} | |
.ins{ | |
z-index:1; | |
} | |
.cont{ | |
z-index:2; | |
} | |
.yin{ | |
z-index:3; | |
} | |
#box .logo{ | |
z-index: 3; | |
top: 0px; | |
opacity: 0; | |
width: 100%; | |
position: fixed; | |
height: 13%; | |
background: url(images/logo.png) no-repeat left top; | |
background-size: contain; | |
left: 0px; | |
} | |
#box .logo.show{ | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
opacity: 1; | |
} | |
.box{ | |
width:100%; | |
height:100%; | |
position:absolute; | |
display:none; | |
} | |
.cont{ | |
position:absolute; | |
background-size:contain; | |
background-position:center center; | |
background-repeat: no-repeat; | |
-ms-transition: all 0.3s ease-in; /* IE 9 */ | |
-moz-transition: all 0.3s ease-in; /* Firefox */ | |
-webkit-transition: all 0.3s ease-in; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s ease-in; | |
-webkit-transition: all 0.3s ease-in; | |
transition: all 0.3s ease-in; | |
opacity:0; | |
} | |
#box1{ | |
background-color:#6096e6; | |
} | |
#box2{ | |
background-color:#f1ca52; | |
} | |
#box3{ | |
background-color:#f8695c; | |
} | |
#box4{ | |
background-color:#ebb651; | |
} | |
#box5{ | |
background-color:#4bce81; | |
} | |
#box6{ | |
background-color:#6096e6; | |
} | |
#box1 .cont{ | |
opacity: 1; | |
position: absolute; | |
left:5%; | |
-webkit-transform:scale(1.2,1.2); | |
top: 13%; | |
height: 48%; | |
width: 90%; | |
} | |
#box1 .cont.show{ | |
opacity:1; | |
-webkit-transform:scale(1,1); | |
background-image:url(images/c1_c.png); | |
} | |
#box1 .title{ | |
position:absolute; | |
top:61%; | |
-webkit-transform:translate3D(0,5%,0); | |
height:15%; | |
width:90%; | |
left:5%; | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box1 .title.show{ | |
-webkit-transform:translate3D(0,0,0); | |
background-image:url(images/c1_t.png?); | |
opacity:1; | |
} | |
/*22222222*/ | |
#box2 .title{ | |
position:absolute; | |
top:16%; | |
-webkit-transform:translate3D(-6%,0,0); | |
height:15%; | |
width:100%; | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box2 .title.show{ | |
-webkit-transform:translate3D(0,0,0); | |
background-image:url(images/c2_t.png); | |
opacity:1; | |
} | |
#box2 .ins{ | |
position:absolute; | |
-webkit-transform:translate3D(-6%,0,0); | |
top: 36%; | |
left: 13%; | |
height: 20%; | |
width: 37%; | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box2 .ins.show{ | |
-webkit-transform:translate3D(0,0,0); | |
opacity: 1; | |
background-image: url(images/c2_i.png); | |
} | |
#box2 .yin{ | |
position: absolute; | |
top: 57%; | |
left: 15%; | |
height: 11%; | |
width: 30%; | |
-webkit-transform:scale(1.2,1.2); | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box2 .yin.show{ | |
opacity: 1; | |
-webkit-transform:scale(1,1); | |
background-image: url(images/c2_y.png); | |
} | |
#box2 .cont{ | |
opacity: 1; | |
position: absolute; | |
left: 16%; | |
top: 32%; | |
height: 53%; | |
width: 90%; | |
} | |
#box2 .cont.show{ | |
opacity:1; | |
/*top:0px;*/ | |
-ms-transform:translate3D(-10%,0,0); | |
-moz-transform:translate3D(-10%,0,0); | |
-webkit-transform:translate3D(-10%,0,0); | |
-o-transform:translate3D(-10%,0,0); | |
-webkit-transform: translate3D(-10%,0,0); | |
transform: translate3D(-10%,0,0); | |
background-image:url(images/c2_c.png); | |
} | |
#box3 .cont{ | |
opacity: 1; | |
position: absolute; | |
left:5%; | |
-webkit-transform:scale(0.8,0.8); | |
top: 25%; | |
height: 48%; | |
width: 90%; | |
} | |
/*33333*/ | |
#box3 .cont.show{ | |
opacity:1; | |
-webkit-transform:scale(1,1); | |
background-image:url(images/c3_c.png); | |
} | |
#box3 .title{ | |
position: absolute; | |
top: 10%; | |
-webkit-transform: translate3D(0,-6%,0); | |
height: 22%; | |
width: 90%; | |
left: 5%; | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box3 .title.show{ | |
-webkit-transform:translate3D(0,0,0); | |
background-image:url(images/c3_t.png); | |
opacity:1; | |
} | |
#box3 .ins{ | |
position:absolute; | |
-webkit-transform:translate3D(0,6%,0); | |
top: 73%; | |
left: 5%; | |
height: 16%; | |
width: 90%; | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box3 .ins.show{ | |
-webkit-transform:translate3D(0,0,0); | |
opacity: 1; | |
background-image: url(images/c3_i.png); | |
} | |
#box3 .yin{ | |
position: absolute; | |
top: 63%; | |
left: 15%; | |
height: 11%; | |
width: 30%; | |
-webkit-transform:scale(1.2,1.2); | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box3 .yin.show{ | |
opacity: 1; | |
-webkit-transform:scale(1,1); | |
background-image: url(images/c3_y.png); | |
} | |
/*4444444*/ | |
#box4 .cont{ | |
opacity: 1; | |
position: absolute; | |
-webkit-transform:scale(1.2,1.2) translate3D(-10%,10%,0); | |
left:5%; | |
top: 25%; | |
height: 48%; | |
width: 90%; | |
} | |
#box4 .cont.show{ | |
opacity:1; | |
-webkit-transform:scale(1,1) translate3D(0,0,0); | |
background-image:url(images/c4_c.png); | |
} | |
#box4 .title{ | |
position:absolute; | |
top: 8%; | |
left:5%; | |
-webkit-transform: translate3D(5%,0,0); | |
height: 22%; | |
width: 90%; | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box4 .title.show{ | |
-webkit-transform:translate3D(0,0,0); | |
background-image:url(images/c4_t.png); | |
opacity:1; | |
} | |
#box4 .ins{ | |
position:absolute; | |
-webkit-transform:translate3D(5%,0,0); | |
top:73%; | |
left:10%; | |
height:17%; | |
width:50%; | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box4 .ins.show{ | |
-webkit-transform:translate3D(0,0,0); | |
opacity: 1; | |
background-image: url(images/c4_i.png); | |
} | |
#box4 .yin{ | |
position: absolute; | |
top: 73%; | |
left: 61%; | |
height: 17%; | |
width: 35%; | |
-webkit-transform:scale(1.2,1.2); | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box4 .yin.show{ | |
opacity: 1; | |
-webkit-transform:scale(1,1); | |
background-image: url(images/c4_y.png); | |
} | |
/*5555555*/ | |
#box5 .cont{ | |
opacity: 1; | |
position: absolute; | |
-webkit-transform:scale(0.8,0.8); | |
left:5%; | |
top: 25%; | |
height: 48%; | |
width: 90%; | |
} | |
#box5 .cont.show{ | |
opacity:1; | |
-webkit-transform:scale(1,1); | |
background-image:url(images/c5_c.png); | |
} | |
#box5 .title{ | |
position:absolute; | |
top: 11%; | |
-webkit-transform: translate3D(0,-6%,0); | |
height: 19%; | |
width: 90%; | |
left: 5%; | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box5 .title.show{ | |
-webkit-transform:translate3D(0,0,0); | |
background-image:url(images/c5_t.png); | |
opacity:1; | |
} | |
#box5 .ins{ | |
position:absolute; | |
-webkit-transform:translate3D(0,6%,0); | |
top: 73%; | |
left: 5%; | |
height: 10%; | |
width: 90%; | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box5 .ins.show{ | |
-webkit-transform:translate3D(0,0,0); | |
opacity: 1; | |
background-image: url(images/c5_i.png); | |
} | |
#box5 .yin{ | |
position: absolute; | |
top: 25%; | |
left: 60%; | |
height: 17%; | |
width: 35%; | |
-webkit-transform:scale(1.2,1.2); | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box5 .yin.show{ | |
opacity: 1; | |
-webkit-transform:scale(1,1); | |
background-image: url(images/c5_y.png); | |
} | |
/*6666666*/ | |
#box6 .cont{ | |
opacity: 1; | |
position: absolute; | |
-webkit-transform:translate3D(0,7%,0); | |
left: 5%; | |
top: 44%; | |
height: 35%; | |
width: 90%; | |
} | |
#box6 .cont.show{ | |
opacity:1; | |
-webkit-transform:translate3D(0,0,0); | |
background-image:url(images/c6_c.png); | |
} | |
#box6 .title{ | |
left: 5%; | |
position: absolute; | |
top: 10%; | |
-webkit-transform:translate3D(0,-7%,0); | |
height: 34%; | |
width: 90%; | |
background-position: center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box6 .title.show{ | |
-webkit-transform:translate3D(0,0,0); | |
background-image:url(images/c6_t.png); | |
opacity:1; | |
} | |
#box6 .yin{ | |
position: absolute; | |
top: 79%; | |
left: 5%; | |
height: 8%; | |
width: 90%; | |
background-position:center center; | |
background-repeat: no-repeat; | |
background-size:contain; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#box6 .yin.show{ | |
opacity: 1; | |
-webkit-transform:scale(1,1); | |
background-image: url(images/c6_btn.png); | |
} | |
#box6 .cont #dl{ | |
display:block; | |
position:absolute; | |
bottom:0px; | |
left:0px; | |
height:20%; | |
width:100%; | |
} | |
#down_index{width: 100%;height: 78px;background-size: contain;background: url(images/down_index.png) no-repeat center center;position: absolute;bottom: 4%;left: 0px;} | |
.down{ | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
z-index:3; | |
width: 90%;height: 6%;background-size: contain;background-image: url(images/down.png?v);background-repeat:no-repeat;background-position:center center;position: fixed;bottom: 4%;left: 5%;opacity: 0; | |
-ms-transform: translate3D(0,9%,0); /* IE 9 */ | |
-moz-transform: translate3D(0,9%,0); /* Firefox */ | |
-webkit-transform: translate3D(0,9%,0); /* Safari 和 Chrome */ | |
-o-transform: translate3D(0,9%,0); | |
-webkit-transform: translate3D(0,9%,0); | |
transform: translate3D(0,9%,0); | |
overflow:visible; | |
} | |
@-webkit-keyframes down{ | |
0% {-webkit-transform:translate3D(0,0%,0);} | |
50% {-webkit-transform:translate3D(0,20%,0);} | |
100% {-webkit-transform:translate3D(0,0%,0);} | |
} | |
.down.show{ | |
opacity: 1; | |
-ms-transform: translate3D(0,0,0); /* IE 9 */ | |
-moz-transform: translate3D(0,0,0); /* Firefox */ | |
-webkit-transform: translate3D(0,0,0); /* Safari 和 Chrome */ | |
-o-transform: translate3D(0,0,0); | |
-webkit-transform: translate3D(0,0,0); | |
transform: translate3D(0,0,0); | |
-webkit-animation: down 2s linear infinite; | |
} | |
.down span{ | |
font-size:12px; | |
top:-20px; | |
color:#fff; | |
font-family: "Microsoft yahei"; | |
position:absolute; | |
left:0px; | |
width:100%; | |
text-align: center; | |
} | |
#box1{position:absolute;left:0px;height:100%;display:block;} | |
#box2{position:absolute;left:0px;height:100%;display:block;} | |
.slide{ | |
-ms-transition: all 0.5s ease-in-out; /* IE 9 */ | |
-moz-transition: all 0.5s ease-in-out; /* Firefox */ | |
-webkit-transition: all 0.5s ease-in-out; /* Safari 和 Chrome */ | |
-o-transition: all 0.5s ease-in-out; | |
-webkit-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
} | |
.mid{ | |
/* top:0px; */ | |
-ms-transform:translate3D(0,0,0); /* IE 9 */ | |
-moz-transform:translate3D(0,0,0); /* Firefox */ | |
-webkit-transform:translate3D(0,0,0); /* Safari 和 Chrome */ | |
-o-transform:translate3D(0,0,0); | |
-webkit-transform: translate3D(0,0,0); | |
transform: translate3D(0,0,0); | |
} | |
.top{ | |
/* top:-100%; */ | |
-ms-transform:translate3D( 0, -100%,0 ); /* IE 9 */ | |
-moz-transform:translate3D( 0, -100% ,0); /* Firefox */ | |
-webkit-transform:translate3D( 0, -100%,0 ); /* Safari 和 Chrome */ | |
-o-transform:translate3D( 0, -100% ,0); | |
-webkit-transform: translate3D( 0, -100%,0 ); | |
transform: translate3D( 0, -100% ); | |
} | |
.bottom{ | |
/* top:100%; */ | |
-ms-transform:translate3D( 0, 100% ,0); /* IE 9 */ | |
-moz-transform:translate3D( 0, 100% ,0); /* Firefox */ | |
-webkit-transform:translate3D( 0, 100%,0 ); /* Safari 和 Chrome */ | |
-o-transform:translate3D( 0, 100%,0 ); | |
-webkit-transform: translate3D( 0, 100% ,0); | |
transform: translate3D( 0, 100% ,0); | |
} | |
#bg{ | |
z-index:-1; | |
width:100%; | |
height:100%; | |
position:absolute; | |
left:0px; | |
top:0px; | |
background:#000; | |
opacity:0; | |
-ms-transition: all 0.3s linear; /* IE 9 */ | |
-moz-transition: all 0.3s linear; /* Firefox */ | |
-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */ | |
-o-transition: all 0.3s linear; | |
-webkit-transition: all 0.3s linear; | |
transition: all 0.3s linear; | |
} | |
#bg.show{ | |
z-index:3; | |
opacity: 0.9; | |
} | |
#bg .weixin{ | |
position: absolute; | |
background-image:url(images/share_a.png); | |
background-position:center center; | |
background-repeat:no-repeat; | |
background-size:contain; | |
width:90%; | |
top: 20%; | |
left: 5%; | |
height: 39%; | |
} | |
#bg .nowei{ | |
position: absolute; | |
background-image: url(images/share_a_n.png); | |
background-position: center center; | |
background-repeat: no-repeat; | |
background-size: contain; | |
width: 80%; | |
top: 30%; | |
left: 10%; | |
height: 39%; | |
} | |
</style> | |
<meta content="双11来啦!大家准备好做首富背后的剁手女人了吗! 剁还是不剁?搜狗浏览器给剁手族带来三宝:网页加速,打假神器,还有现金红包一样都不能少! 搜狗浏览器 抢iPhone6 抢iPhone6 plus;抢现金红包;淘宝比价;双十一" name="description"> | |
<body> | |
<div id="box"> | |
<a class="logo" href="http://mse.sogou.com/"></a> | |
<div class="down"> | |
<span>继续浏览 惊喜不断</span> | |
</div> | |
<div id="box1" class="box mid"> | |
<div class="cont"></div> | |
<div class="title"></div> | |
<div class="ins"></div> | |
<div class="yin"></div> | |
</div> | |
<div id="box2" class="box bottom"> | |
<div class="cont"></div> | |
<div class="title"></div> | |
<div class="ins"></div> | |
<div class="yin"></div> | |
</div> | |
<div id="box3" class="box"> | |
<div class="cont"></div> | |
<div class="title"></div> | |
<div class="ins"></div> | |
<div class="yin"></div> | |
</div> | |
<div id="box4" class="box"> | |
<div class="cont"></div> | |
<div class="title"></div> | |
<div class="ins"></div> | |
<div class="yin"></div> | |
</div> | |
<div id="box5" class="box"> | |
<div class="cont"></div> | |
<div class="title"></div> | |
<div class="ins"></div> | |
<div class="yin"></div> | |
</div> | |
<div id="box6" class="box"> | |
<div class="cont"></div> | |
<div class="title"></div> | |
<div class="ins"></div> | |
<div class="yin"></div> | |
</div> | |
</div> | |
<div id="bg"> | |
<div class="tips"></div> | |
</div> | |
<script> | |
window.addEventListener('touchmove', function (e) { | |
e.preventDefault(); | |
}); | |
var pingback; | |
Zepto(function($){ | |
for(var i=1;i<=6;i++){ | |
document.createElement('img').src="images/c"+i+"_c.png"; | |
} | |
var scroller= new myscroll(); | |
pingback= new pingback(); | |
scroller.showEle(); | |
pingback.pv(scroller.index); | |
$(".logo").on("tap",function(){ | |
return false; | |
}); | |
$("#box6 .yin").on("tap",function(){ | |
if(is_weixn()){ | |
$("#bg .tips").addClass("weixin"); | |
$("#bg").addClass("show"); | |
pingback.onclick("share"); | |
}else{ | |
$("#bg .tips").addClass("nowei"); | |
$("#bg").addClass("show"); | |
pingback.onclick("sharenowx"); | |
} | |
return false; | |
}); | |
$("#bg").on("tap",function(){ | |
$("#bg").removeClass("show"); | |
}); | |
$(".down").on("tap",function(){ | |
scroller.next(); | |
return false; | |
}); | |
$("#box").swipeUp(function(event){ | |
scroller.next(); | |
event.preventDefault(); | |
}); | |
$("#box").swipeDown(function(event){ | |
scroller.prev(); | |
event.preventDefault(); | |
}); | |
}); | |
function myscroll(){ | |
this.index = 1; | |
this.length = 7; | |
this.circle = 0; | |
this.fixedIndex = function() { | |
this.index = this.index>6?1:(this.index<1)?6:this.index | |
}; | |
// 直接使用 css3 动画效果. | |
this.next = function() { | |
var oldindex = this.index; | |
var self = this; | |
if(this.isanimate){ | |
return false; | |
} | |
$(".down span").hide(); | |
$(".down").addClass("show"); | |
this.isanimate = 1; | |
// @NOTE: 索引从 0 开始. | |
this.fixedIndex( ++this.index ); | |
index = this.index; | |
$("#box"+index).offset(); | |
$("#box"+index).show(); | |
$("#box"+index).removeClass( 'top' ).addClass( 'bottom' ); | |
$('.mid' ).addClass("slide").offset(); | |
$('.mid' ).removeClass( 'mid' ).addClass( 'top' ); | |
//$( '.bottom' ).offset(); | |
$("#box"+index).addClass("slide").offset(); | |
$("#box"+index).removeClass( 'bottom' ).addClass( 'mid' ); | |
$('.mid' ).one("webkitTransitionEnd",function(){ | |
self.isanimate= 0; | |
self.showEle(); | |
$(".slide").removeClass("slide"); | |
}) | |
pingback.pv(this.index); | |
}; | |
this.prev = function(){ | |
var oldindex = this.index; | |
var self = this; | |
if(this.isanimate||(this.index==1&&this.circle==0)){ | |
return false; | |
} | |
$(".down span").hide(); | |
$(".down").addClass("show"); | |
this.isanimate = 1; | |
// @NOTE: 索引从 0 开始. | |
this.fixedIndex( --this.index ); | |
var index = this.index; | |
$("#box"+index).offset(); | |
$("#box"+index).show(); | |
$("#box"+index).removeClass( 'bottom' ).addClass( 'top' ); | |
$( '.mid' ).addClass("slide").offset(); | |
$( '.mid' ).removeClass( 'mid' ).addClass( 'bottom' ); | |
//$( '.top' ).offset(); | |
$("#box"+index).addClass("slide").offset(); | |
$("#box"+index).removeClass( 'top' ).addClass( 'mid' ); | |
$('.mid' ).one("webkitTransitionEnd",function(){ | |
self.isanimate= 0; | |
self.showEle(); | |
$(".slide").removeClass("slide"); | |
}) | |
pingback.pv(this.index); | |
}; | |
this.showEle=function(){ | |
var self =this; | |
var index = this.index; | |
switch(this.index){ | |
case 1:{ | |
$(".down span").show(); | |
$("#box"+index+" .cont").offset(); | |
$("#box"+index+" .cont").addClass("show").one("webkitTransitionEnd",function(){ | |
$(".logo").addClass("show"); | |
$("#box"+index+" .title").addClass("show").one("webkitTransitionEnd",function(){ | |
$(".down").addClass("show"); | |
}); | |
}); | |
break; | |
} | |
case 2:{ | |
$("#box"+index+" .cont").offset(); | |
$("#box"+index+" .cont").addClass("show"); | |
$("#box"+index+" .title").addClass("show"); | |
$("#box"+index+" .ins").addClass("show").one("webkitTransitionEnd",function(){ | |
$("#box"+index+" .yin").addClass("show"); | |
}); | |
break; | |
} | |
case 3: | |
$("#box"+index+" .cont").offset(); | |
$("#box"+index+" .cont").addClass("show"); | |
$("#box"+index+" .cont").one("webkitTransitionEnd",function(){ | |
$("#box"+index+" .title").addClass("show"); | |
$("#box"+index+" .ins").addClass("show").one("webkitTransitionEnd",function(){ | |
$("#box"+index+" .yin").addClass("show"); | |
}); | |
}); | |
break; | |
case 4: | |
$("#box"+index+" .cont").offset(); | |
$("#box"+index+" .cont").addClass("show"); | |
$("#box"+index+" .cont").one("webkitTransitionEnd",function(){ | |
$("#box"+index+" .title").addClass("show"); | |
setTimeout(function(){ | |
$("#box"+index+" .ins").addClass("show").one("webkitTransitionEnd",function(){ | |
$("#box"+index+" .yin").addClass("show"); | |
}); | |
},300); | |
}); | |
break; | |
case 5: | |
self.circle = 1; | |
$("#box"+index+" .cont").offset(); | |
$("#box"+index+" .cont").addClass("show"); | |
$("#box"+index+" .cont").one("webkitTransitionEnd",function(){ | |
$("#box"+index+" .title").addClass("show"); | |
$("#box"+index+" .ins").addClass("show").one("webkitTransitionEnd",function(){ | |
$("#box"+index+" .yin").addClass("show"); | |
}); | |
}); | |
break; | |
case 6: | |
$(".down").removeClass("show"); | |
$("#box"+index+" .cont").offset(); | |
$("#box"+index+" .cont").addClass("show"); | |
$("#box"+index+" .title").addClass("show").one("webkitTransitionEnd",function(){ | |
$("#box"+index+" .yin").addClass("show"); | |
}); | |
break; | |
} | |
} | |
} | |
function is_weixn(){ | |
var ua = navigator.userAgent.toLowerCase(); | |
if(ua.match(/MicroMessenger/i)=="micromessenger") { | |
return true; | |
} else { | |
return false; | |
} | |
} | |
//pingback | |
function getCookie1(offset) { | |
var endstr = document.cookie.indexOf (";", offset); | |
if (endstr == -1) endstr = document.cookie.length; | |
return unescape(document.cookie.substring(offset, endstr)); | |
} | |
function getCookie2(name) { | |
var arg = name + "="; | |
var alen = arg.length; | |
var clen = document.cookie.length; | |
var i = 0; | |
while (i < clen) { | |
var j = i + alen; | |
if (document.cookie.substring(i, j) == arg) return getCookie1(j); | |
i = document.cookie.indexOf(" ", i) + 1; | |
if (i == 0) break; | |
} | |
return null; } | |
function setCookie(name, value, exptime, domain){ | |
var domain = domain ? domain : "ie.sogou.com"; | |
var exp = new Date(); | |
exp.setTime(exp.getTime() + exptime); | |
document.cookie = name + "=" + value + ";path=/;expires=" + exp.toGMTString() + ";domain=" + domain + ";"; | |
} | |
var pingback = function(){ | |
var pingServerUrl = "http://ping.ie.sogou.com/"; | |
var n = new Date().getTime(); | |
var c = escape(n*1000+Math.round(Math.random()*1000)); | |
this.getUid = function(){ | |
var uid = ""; | |
if(getCookie2("SMYUV") != null) { | |
uid = getCookie2("SMYUV"); | |
} else { | |
uid = c; | |
setCookie("SMYUV", uid, 2592000000, "sogou.com"); | |
} | |
return uid; | |
} | |
this.refurl = document.referrer == ""? "" : encodeURIComponent(document.referrer); | |
this.pl = encodeURIComponent(window.location.href); | |
this.u = this.getUid(); | |
this.onclick = function(type){ | |
var clickImg =document.createElement('img'); | |
clickImg.src = pingServerUrl + "ct.GIF?t="+c+"&u="+ this.u +"&r="+this.refurl+"&pl="+this.pl+"&type=" +type; | |
} | |
this.pv = function(index){ | |
var clickImg =document.createElement('img'); | |
clickImg.src = pingServerUrl + "pv.GIF?t="+c+"&u="+ this.u +"&r="+this.refurl+"&pl="+this.pl+"&index=" +index; | |
} | |
}; | |
var tit = "搜狗浏览器双十一网购专版,狂送iPhone 6 和千元红包!"; | |
var content = "双11来啦! 搜狗浏览器给剁手族带来三宝:网页加速,打假神器,现金红包一样都不能少!"; | |
if(typeof(window.shareData) == 'undefined'){ | |
window.shareData = { | |
"imgUrl": "http://"+window.location.host+"/zhuanban/gouwu/mob/images/share.png", | |
"timeLineLink": "http://"+window.location.host+"/zhuanban/gouwu/mob/", | |
"sendFriendLink": "http://"+window.location.host+"/zhuanban/gouwu/mob/", | |
"weiboLink": "http://"+window.location.host+"/zhuanban/gouwu/mob/", | |
"tTitle": tit, | |
"tContent": content, | |
"fTitle": tit, | |
"fContent": content, | |
"wContent": content | |
} | |
} | |
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { | |
// 发送给好友 | |
WeixinJSBridge.on('menu:share:appmessage', function (argv) { | |
WeixinJSBridge.invoke('sendAppMessage', { | |
"img_url": window.shareData.imgUrl, | |
"img_width": "640", | |
"img_height": "640", | |
"link": window.shareData.sendFriendLink, | |
"desc": window.shareData.fContent, | |
"title": window.shareData.fTitle | |
}, function (res) { | |
// var json = JSON.parse(res.err_msg); | |
if(res.err_msg.split(":")[1]=="ok"){ | |
$Jason.ping.getPv("share"); | |
window.location = "http://"+window.location.host+"/html/guess/index.html"; | |
} | |
weimobAfterShare("",window.shareData.sendFriendLink,'appmessage'); | |
_report('send_msg', res.err_msg); | |
}) | |
}); | |
// 分享到朋友圈 | |
WeixinJSBridge.on('menu:share:timeline', function (argv) { | |
WeixinJSBridge.invoke('shareTimeline', { | |
"img_url": window.shareData.imgUrl, | |
"img_width": "640", | |
"img_height": "640", | |
"link": window.shareData.timeLineLink, | |
"desc": window.shareData.tContent, | |
"content":window.shareData.tContent, | |
"title": window.shareData.tTitle+","+window.shareData.tContent | |
}, function (res) { | |
//weimobAfterShare("",window.shareData.timeLineLink,'timeline'); | |
if(res.err_msg.split(":")[1]=="ok"){ | |
$Jason.ping.getPv("share"); | |
window.location = "http://"+window.location.host+"/html/guess/index.html"; | |
} | |
_report('timeline', res.err_msg); | |
}); | |
}); | |
// 分享到微博 | |
WeixinJSBridge.on('menu:share:weibo', function (argv) { | |
WeixinJSBridge.invoke('shareWeibo', { | |
"content": window.shareData.wContent, | |
"url": window.shareData.weiboLink | |
}, function (res) { | |
weimobAfterShare("",window.shareData.weiboLink,'weibo'); | |
_report('weibo', res.err_msg); | |
}); | |
}); | |
}, false); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment