http://weibo.com/1784501333/A2UEADnfw 有时候不得不佩服360在产品上的微创新，360导航确确实实是把传统导航站颠覆了。不信可以点击红框处看看 http://t.cn/hxMyP

harlem-shake.css

.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
}
 

harlem-shake.js

(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
    })
})();