Last active
August 29, 2015 14:08
-
-
Save naoyeye/cc861183c48ee411d410 to your computer and use it in GitHub Desktop.
This file contains hidden or 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