Created
August 2, 2013 16:21
-
-
Save sivagao/6141224 to your computer and use it in GitHub Desktop.
http://weibo.com/1784501333/A2UEADnfw 有时候不得不佩服360在产品上的微创新，360导航确确实实是把传统导航站颠覆了。不信可以点击红框处看看 http://t.cn/hxMyP
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
| .dance-normal { | |
| animation: wobble 1s ease-in-out infinite; | |
| -moz-animation: wobble 1s ease-in-out infinite; | |
| -webkit-animation: wobble 1s ease-in-out infinite; | |
| -o-animation: wobble 1s ease-in-out infinite; | |
| -ms-animation: wobble 1s ease-in-out infinite | |
| } | |
| .dance-slow { | |
| animation: wobble 1.6s ease-in-out infinite; | |
| -moz-animation: wobble 1.6s ease-in-out infinite; | |
| -webkit-animation: wobble 1.6s ease-in-out infinite; | |
| -o-animation: wobble 1.6s ease-in-out infinite; | |
| -ms-animation: wobble 1.6s ease-in-out infinite | |
| } | |
| .dance-end { | |
| animation-iteration-count: 1; | |
| -webkit-animation-iteration-count: 1; | |
| -moz-animation-iteration-count: 1; | |
| -o-animation-iteration-count: 1; | |
| -ms-animation-iteration-count: 1 | |
| } | |
| @-webkit-keyframes shake { | |
| 0%,100% { | |
| -webkit-transform: translateX(0) | |
| } | |
| 10%,30%,50%,70%,90% { | |
| -webkit-transform: translateX(-10px) | |
| } | |
| 20%,40%,60%,80% { | |
| -webkit-transform: translateX(10px) | |
| } | |
| } | |
| @-moz-keyframes shake { | |
| 0%,100% { | |
| -moz-transform: translateX(0) | |
| } | |
| 10%,30%,50%,70%,90% { | |
| -moz-transform: translateX(-10px) | |
| } | |
| 20%,40%,60%,80% { | |
| -moz-transform: translateX(10px) | |
| } | |
| } | |
| @-o-keyframes shake { | |
| 0%,100% { | |
| -o-transform: translateX(0) | |
| } | |
| 10%,30%,50%,70%,90% { | |
| -o-transform: translateX(-10px) | |
| } | |
| 20%,40%,60%,80% { | |
| -o-transform: translateX(10px) | |
| } | |
| } | |
| @keyframes shake { | |
| 0%,100% { | |
| transform: translateX(0) | |
| } | |
| 10%,30%,50%,70%,90% { | |
| transform: translateX(-10px) | |
| } | |
| 20%,40%,60%,80% { | |
| transform: translateX(10px) | |
| } | |
| } | |
| .shake { | |
| -webkit-animation-name: shake; | |
| -moz-animation-name: shake; | |
| -o-animation-name: shake; | |
| animation-name: shake | |
| } | |
| @-webkit-keyframes tada { | |
| 0% { | |
| -webkit-transform: scale(1) | |
| } | |
| 10%,20% { | |
| -webkit-transform: scale(0.9) rotate(-3deg) | |
| } | |
| 30%,50%,70%,90% { | |
| -webkit-transform: scale(1.1) rotate(3deg) | |
| } | |
| 40%,60%,80% { | |
| -webkit-transform: scale(1.1) rotate(-3deg) | |
| } | |
| 100% { | |
| -webkit-transform: scale(1) rotate(0) | |
| } | |
| } | |
| @-moz-keyframes tada { | |
| 0% { | |
| -moz-transform: scale(1) | |
| } | |
| 10%,20% { | |
| -moz-transform: scale(0.9) rotate(-3deg) | |
| } | |
| 30%,50%,70%,90% { | |
| -moz-transform: scale(1.1) rotate(3deg) | |
| } | |
| 40%,60%,80% { | |
| -moz-transform: scale(1.1) rotate(-3deg) | |
| } | |
| 100% { | |
| -moz-transform: scale(1) rotate(0) | |
| } | |
| } | |
| @-o-keyframes tada { | |
| 0% { | |
| -o-transform: scale(1) | |
| } | |
| 10%,20% { | |
| -o-transform: scale(0.9) rotate(-3deg) | |
| } | |
| 30%,50%,70%,90% { | |
| -o-transform: scale(1.1) rotate(3deg) | |
| } | |
| 40%,60%,80% { | |
| -o-transform: scale(1.1) rotate(-3deg) | |
| } | |
| 100% { | |
| -o-transform: scale(1) rotate(0) | |
| } | |
| } | |
| @keyframes tada { | |
| 0% { | |
| transform: scale(1) | |
| } | |
| 10%,20% { | |
| transform: scale(0.9) rotate(-3deg) | |
| } | |
| 30%,50%,70%,90% { | |
| transform: scale(1.1) rotate(3deg) | |
| } | |
| 40%,60%,80% { | |
| transform: scale(1.1) rotate(-3deg) | |
| } | |
| 100% { | |
| transform: scale(1) rotate(0) | |
| } | |
| } | |
| .tada { | |
| -webkit-animation-name: tada; | |
| -moz-animation-name: tada; | |
| -o-animation-name: tada; | |
| animation-name: tada | |
| } | |
| @-webkit-keyframes flash { | |
| 0%,50%,100% { | |
| opacity: 1 | |
| } | |
| 25%,75% { | |
| opacity: 0 | |
| } | |
| } | |
| @-moz-keyframes flash { | |
| 0%,50%,100% { | |
| opacity: 1 | |
| } | |
| 25%,75% { | |
| opacity: 0 | |
| } | |
| } | |
| @-o-keyframes flash { | |
| 0%,50%,100% { | |
| opacity: 1 | |
| } | |
| 25%,75% { | |
| opacity: 0 | |
| } | |
| } | |
| @keyframes flash { | |
| 0%,50%,100% { | |
| opacity: 1 | |
| } | |
| 25%,75% { | |
| opacity: 0 | |
| } | |
| } | |
| .flash { | |
| -webkit-animation-name: flash; | |
| -moz-animation-name: flash; | |
| -o-animation-name: flash; | |
| animation-name: flash | |
| } | |
| @-webkit-keyframes wobble { | |
| 0% { | |
| -webkit-transform: translateX(0%) | |
| } | |
| 15% { | |
| -webkit-transform: translateX(-25%) rotate(-5deg) | |
| } | |
| 30% { | |
| -webkit-transform: translateX(20%) rotate(3deg) | |
| } | |
| 45% { | |
| -webkit-transform: translateX(-15%) rotate(-3deg) | |
| } | |
| 60% { | |
| -webkit-transform: translateX(10%) rotate(2deg) | |
| } | |
| 75% { | |
| -webkit-transform: translateX(-5%) rotate(-1deg) | |
| } | |
| 100% { | |
| -webkit-transform: translateX(0%) | |
| } | |
| } | |
| @-moz-keyframes wobble { | |
| 0% { | |
| -moz-transform: translateX(0%) | |
| } | |
| 15% { | |
| -moz-transform: translateX(-25%) rotate(-5deg) | |
| } | |
| 30% { | |
| -moz-transform: translateX(20%) rotate(3deg) | |
| } | |
| 45% { | |
| -moz-transform: translateX(-15%) rotate(-3deg) | |
| } | |
| 60% { | |
| -moz-transform: translateX(10%) rotate(2deg) | |
| } | |
| 75% { | |
| -moz-transform: translateX(-5%) rotate(-1deg) | |
| } | |
| 100% { | |
| -moz-transform: translateX(0%) | |
| } | |
| } | |
| @-o-keyframes wobble { | |
| 0% { | |
| -o-transform: translateX(0%) | |
| } | |
| 15% { | |
| -o-transform: translateX(-25%) rotate(-5deg) | |
| } | |
| 30% { | |
| -o-transform: translateX(20%) rotate(3deg) | |
| } | |
| 45% { | |
| -o-transform: translateX(-15%) rotate(-3deg) | |
| } | |
| 60% { | |
| -o-transform: translateX(10%) rotate(2deg) | |
| } | |
| 75% { | |
| -o-transform: translateX(-5%) rotate(-1deg) | |
| } | |
| 100% { | |
| -o-transform: translateX(0%) | |
| } | |
| } | |
| @keyframes wobble { | |
| 0% { | |
| transform: translateX(0%) | |
| } | |
| 15% { | |
| transform: translateX(-25%) rotate(-5deg) | |
| } | |
| 30% { | |
| transform: translateX(20%) rotate(3deg) | |
| } | |
| 45% { | |
| transform: translateX(-15%) rotate(-3deg) | |
| } | |
| 60% { | |
| transform: translateX(10%) rotate(2deg) | |
| } | |
| 75% { | |
| transform: translateX(-5%) rotate(-1deg) | |
| } | |
| 100% { | |
| transform: translateX(0%) | |
| } | |
| } | |
| .wobble { | |
| -webkit-animation-name: wobble; | |
| -moz-animation-name: wobble; | |
| -o-animation-name: wobble; | |
| animation-name: wobble | |
| } | |
| @-webkit-keyframes pulse { | |
| 0% { | |
| -webkit-transform: scale(1) | |
| } | |
| 50% { | |
| -webkit-transform: scale(1.1) | |
| } | |
| 100% { | |
| -webkit-transform: scale(1) | |
| } | |
| } | |
| @-moz-keyframes pulse { | |
| 0% { | |
| -moz-transform: scale(1) | |
| } | |
| 50% { | |
| -moz-transform: scale(1.1) | |
| } | |
| 100% { | |
| -moz-transform: scale(1) | |
| } | |
| } | |
| @-o-keyframes pulse { | |
| 0% { | |
| -o-transform: scale(1) | |
| } | |
| 50% { | |
| -o-transform: scale(1.1) | |
| } | |
| 100% { | |
| -o-transform: scale(1) | |
| } | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1) | |
| } | |
| 50% { | |
| transform: scale(1.1) | |
| } | |
| 100% { | |
| transform: scale(1) | |
| } | |
| } | |
| .pulse { | |
| -webkit-animation-name: pulse; | |
| -moz-animation-name: pulse; | |
| -o-animation-name: pulse; | |
| animation-name: pulse | |
| } | |
| @-webkit-keyframes bounce { | |
| 0%,20%,50%,80%,100% { | |
| -webkit-transform: translateY(0) | |
| } | |
| 40% { | |
| -webkit-transform: translateY(-30px) | |
| } | |
| 60% { | |
| -webkit-transform: translateY(-15px) | |
| } | |
| } | |
| @-moz-keyframes bounce { | |
| 0%,20%,50%,80%,100% { | |
| -moz-transform: translateY(0) | |
| } | |
| 40% { | |
| -moz-transform: translateY(-30px) | |
| } | |
| 60% { | |
| -moz-transform: translateY(-15px) | |
| } | |
| } | |
| @-o-keyframes bounce { | |
| 0%,20%,50%,80%,100% { | |
| -o-transform: translateY(0) | |
| } | |
| 40% { | |
| -o-transform: translateY(-30px) | |
| } | |
| 60% { | |
| -o-transform: translateY(-15px) | |
| } | |
| } | |
| @keyframes bounce { | |
| 0%,20%,50%,80%,100% { | |
| transform: translateY(0) | |
| } | |
| 40% { | |
| transform: translateY(-30px) | |
| } | |
| 60% { | |
| transform: translateY(-15px) | |
| } | |
| } | |
| .bounce { | |
| -webkit-animation-name: bounce; | |
| -moz-animation-name: bounce; | |
| -o-animation-name: bounce; | |
| animation-name: bounce | |
| } | |
| @-webkit-keyframes swing { | |
| 20%,40%,60%,80%,100% { | |
| -webkit-transform-origin: top center | |
| } | |
| 20% { | |
| -webkit-transform: rotate(15deg) | |
| } | |
| 40% { | |
| -webkit-transform: rotate(-10deg) | |
| } | |
| 60% { | |
| -webkit-transform: rotate(5deg) | |
| } | |
| 80% { | |
| -webkit-transform: rotate(-5deg) | |
| } | |
| 100% { | |
| -webkit-transform: rotate(0deg) | |
| } | |
| } | |
| @-moz-keyframes swing { | |
| 20% { | |
| -moz-transform: rotate(15deg) | |
| } | |
| 40% { | |
| -moz-transform: rotate(-10deg) | |
| } | |
| 60% { | |
| -moz-transform: rotate(5deg) | |
| } | |
| 80% { | |
| -moz-transform: rotate(-5deg) | |
| } | |
| 100% { | |
| -moz-transform: rotate(0deg) | |
| } | |
| } | |
| @-o-keyframes swing { | |
| 20% { | |
| -o-transform: rotate(15deg) | |
| } | |
| 40% { | |
| -o-transform: rotate(-10deg) | |
| } | |
| 60% { | |
| -o-transform: rotate(5deg) | |
| } | |
| 80% { | |
| -o-transform: rotate(-5deg) | |
| } | |
| 100% { | |
| -o-transform: rotate(0deg) | |
| } | |
| } | |
| @keyframes swing { | |
| 20% { | |
| transform: rotate(15deg) | |
| } | |
| 40% { | |
| transform: rotate(-10deg) | |
| } | |
| 60% { | |
| transform: rotate(5deg) | |
| } | |
| 80% { | |
| transform: rotate(-5deg) | |
| } | |
| 100% { | |
| transform: rotate(0deg) | |
| } | |
| } | |
| .swing { | |
| -webkit-transform-origin: top center; | |
| -moz-transform-origin: top center; | |
| -o-transform-origin: top center; | |
| transform-origin: top center; | |
| -webkit-animation-name: swing; | |
| -moz-animation-name: swing; | |
| -o-animation-name: swing; | |
| animation-name: swing | |
| } | |
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
| (function() { | |
| var e = document.body || document.documentElement, | |
| t = e.style, | |
| n = "webkitTransitionEnd oTransitionEnd transitionend", | |
| r = t.WebkitTransition !== undefined || t.MozTransition !== undefined || t.OTransition !== undefined || t.transition !== undefined; | |
| qboot.await(function() { | |
| return window.QW | |
| }, function() { | |
| var e = !! document.createElement("audio").canPlayType && "" != document.createElement("audio").canPlayType('audio/mpeg; codecs="mp3"'), | |
| t = !! document.createElement("audio").canPlayType && "" != document.createElement("audio").canPlayType('audio/ogg; codecs="opus"'); | |
| if (!e && !t) return; | |
| if (!r) return; | |
| var n = "http://s8.qhimg.com/share/audio/hao360/harlem-shake.mp3", | |
| i = "http://s8.qhimg.com/share/audio/hao360/harlem-shake.ogg", | |
| s = function() { | |
| var e = { | |
| BEGIN: "begin", | |
| FIRST: "s1", | |
| SECOND: "s2", | |
| THIRD: "s3", | |
| FOURTH: "s4", | |
| FIFTH: "s5", | |
| END: "end" | |
| }, t = "dance-normal", | |
| n = "dance-normal", | |
| r = "dance-slow", | |
| i = "dance-end", | |
| s = ["shake", "pulse", "pulse", "tada"], | |
| o = function() { | |
| var e = 30, | |
| t = 120, | |
| n = 300, | |
| r = 300, | |
| i = 450, | |
| s = 750, | |
| o = Dom.getDocRect(); | |
| return { | |
| isSuitable: function(r) { | |
| var i = { | |
| height: r.offsetHeight, | |
| width: r.offsetWidth | |
| }; | |
| return i.height > e && i.height < n && i.width > t && i.width < s | |
| }, | |
| isVisible: function(e) { | |
| var t = W(e).getRect(); | |
| return t.left > o.scrollX && t.left <= o.scrollX + o.width && t.top > o.scrollY && t.top <= o.scrollY + o.height | |
| }, | |
| isBig: function(e) { | |
| return e.offsetWidth > i | |
| }, | |
| isSmall: function(e) { | |
| return e.offsetWidth < r | |
| } | |
| } | |
| }(), | |
| u = document.getElementsByTagName("div"), | |
| a = [], | |
| f = []; | |
| for (var l = 0, c = u.length, h; l < c; l++) { | |
| h = u[l]; | |
| if (h.id.indexOf("activity") > -1 || h.className.indexOf("activity") > -1) continue; | |
| o.isSuitable(h) && (o.isVisible(h) && o.isSmall(h) && a.push(h), f.push(h)) | |
| } | |
| var p = function() { | |
| a[0] && W(a[0]).addClass(t), T = e.FIRST | |
| }, d = function() { | |
| a[1] && W(a[1]).addClass(t), T = e.SECOND | |
| }, v = function() { | |
| a[2] && W(a[2]).addClass(t), T = e.THIRD | |
| }, m = function(e, n) { | |
| e.setAttribute("data-dance", n), W(e).addClass(t + " " + n) | |
| }, g = function(e) { | |
| var n = e.getAttribute("data-dance"); | |
| W(e).removeClass(t).removeClass(n).removeClass(i), e.removeAttribute("data-dance") | |
| }, y = null, | |
| b = function() { | |
| clearTimeout(y), t = n, W("." + i).removeClass(i) | |
| }, w = function() { | |
| b(); | |
| for (var t = 0, n = f.length, r; t < n; t++) o.isBig(f[t]) ? r = "bounce" : r = s[parseInt(Math.random() * s.length)], m(f[t], r); | |
| T = e.FOURTH | |
| }, E = function() { | |
| W("." + t).addClass(i), y = setTimeout(function() { | |
| S(), W("." + i).removeClass(i), T = e.END | |
| }, 2e3) | |
| }, S = function() { | |
| W("." + t).forEach(function(e) { | |
| g(e) | |
| }) | |
| }, x = function() { | |
| W("." + t).replaceClass(t, r), t = r, T = e.FIFTH | |
| }, T = ""; | |
| return { | |
| begin: function() { | |
| T = e.BEGIN, b() | |
| }, | |
| next: function() { | |
| T == e.BEGIN ? p() : T == e.FIRST ? d() : T == e.SECOND ? v() : T == e.THIRD ? w() : T == e.FOURTH && x() | |
| }, | |
| end: function() { | |
| E() | |
| }, | |
| isDancing: function() { | |
| return T != "" && T != e.END | |
| } | |
| } | |
| }(), | |
| o = null, | |
| u = function() { | |
| if (!e) { | |
| var e = new Audio; | |
| e.autoplay = !0, e.loop = !1, e.preload = "auto", e.autobuffer = !0, e.src = t ? i : n; | |
| var r = [ | |
| [.5, 5.5], | |
| [5.5, 10.5], | |
| [10.5, 15.5], | |
| [15.5, 27], | |
| [27, 29] | |
| ], | |
| o = [!1, !1, !1, !1, !1]; | |
| e.addEventListener("timeupdate", function(t) { | |
| var n = e.currentTime, | |
| i = r.length; | |
| for (var u = 0; u < i; u++) n >= r[u][0] && n < r[u][1] && !o[u] && (o[u] = !0, s.next()); | |
| n >= r[i - 1][1] && s.end() | |
| }), e.addEventListener("play", function() { | |
| s.begin() | |
| }), e.addEventListener("ended", function() { | |
| s.end() | |
| }) | |
| } | |
| try { | |
| e.currentTime = 0, e.play() | |
| } catch (u) {} | |
| }; | |
| W(".nrj-dance").css("cursor", "pointer").click(function() { | |
| qboot.load("danceCss", function() { | |
| s.isDancing() || u() | |
| }) | |
| }), window.dance = s | |
| }) | |
| })(); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment