让你的网站学会跳舞！

简单代码，让网站每个模块都舞动起来！跟着我，听着乐曲，音乐high起来！

在回访V7V3网站时，偶然在其首页顶端的快捷菜单栏中发现“high一下”按钮，好奇地点了一下，然后…音乐就开始狂暴起来了！

logo晃起来！
标题动起来！（动次动次动次~咚咚咚动次~）
小广告们，你们的手在哪里？掌声在哪里？

平日里，可怜的碎碎念网站都是安安静静地躺在收藏夹里，这一次，我也要狂暴一回啦！

开启音乐，跟着扭动的网页high起来吧！

音乐太疯狂，节制点玩，别把你的浏览器high爆了哟！

DEMO

点击这里high一下吧！

演示：

一、JS代码

1. function hig() { (function() {    
2.         function c() {    
3.             var e = document.createElement(“link”);    
4.             e.setAttribute(“type”, “text/css”);    
5.             e.setAttribute(“rel”, “stylesheet”);    
6.             e.setAttribute(“href”, f);    
7.             e.setAttribute(“class”, l);    
8.             document.body.appendChild(e)    
9.         }    
10.         function h() {    
11.             var e = document.getElementsByClassName(l);    
12.             for (var t = 0; t < e.length; t++) {    
13.                 document.body.removeChild(e[t])    
14.             }    
15.         }    
16.         function p() {    
17.             var e = document.createElement(“div”);    
18.             e.setAttribute(“class”, a);    
19.             document.body.appendChild(e);    
20.             setTimeout(function() {    
21.                 document.body.removeChild(e)    
22.             },    
23.             100)    
24.         }    
25.         function d(e) {    
26.             return {    
27.                 height: e.offsetHeight,    
28.                 width: e.offsetWidth    
29.             }    
30.         }    
31.         function v(i) {    
32.             var s = d(i);    
33.             return s.height > e && s.height < n && s.width > t && s.width < r    
34.         }    
35.         function m(e) {    
36.             var t = e;    
37.             var n = 0;    
38.             while ( !! t) {    
39.                 n += t.offsetTop;    
40.                 t = t.offsetParent    
41.             }    
42.             return n    
43.         }    
44.         function g() {    
45.             var e = document.documentElement;    
46.             if ( !! window.innerWidth) {    
47.                 return window.innerHeight    
48.             } else if (e && !isNaN(e.clientHeight)) {    
49.                 return e.clientHeight    
50.             }    
51.             return 0    
52.         }    
53.         function y() {    
54.             if (window.pageYOffset) {    
55.                 return window.pageYOffset    
56.             }    
57.             return Math.max(document.documentElement.scrollTop, document.body.scrollTop)    
58.         }    
59.         function E(e) {    
60.             var t = m(e);    
61.             return t >= w && t <= b + w    
62.         }    
63.         function S() {    
64.             var e = document.createElement(“audio”);    
65.             e.setAttribute(“class”, l);    
66.             e.src = i;    
67.             e.loop = false;    
68.             e.addEventListener(“canplay”,    
69.             function() {    
70.                 setTimeout(function() {    
71.                     x(k)    
72.                 },    
73.                 500);    
74.                 setTimeout(function() {    
75.                     N();    
76.                     p();    
77.                     for (var e = 0; e < O.length; e++) {    
78.                         T(O[e])    
79.                     }    
80.                 },    
81.                 15500)    
82.             },    
83.             true);    
84.             e.addEventListener(“ended”,    
85.             function() {    
86.                 N();    
87.                 h()    
88.             },    
89.             true);    
90.             e.innerHTML = “ <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>”;    
91.             document.body.appendChild(e);    
92.             e.play()    
93.         }    
94.         function x(e) {    
95.             e.className += “ ” + s + “ ” + o    
96.         }    
97.         function T(e) {    
98.             e.className += “ ” + s + “ ” + u[Math.floor(Math.random() * u.length)]    
99.         }    
100.         function N() {    
101.             var e = document.getElementsByClassName(s);    
102.             var t = new RegExp(“\\b” + s + “\\b”);    
103.             for (var n = 0; n < e.length;) {    
104.                 e[n].className = e[n].className.replace(t, “”)    
105.             }    
106.         }    
107.         var e = 30;    
108.         var t = 30;    
109.         var n = 350;    
110.         var r = 350;    
111.         var i = “//xxx.com/xx.mp3″;    //此处替换成你的mp3地址  
112.         var s = “mw-harlem_shake_me”;    
113.         var o = “im_first”;    
114.         var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];    
115.         var a = “mw-strobe_light”;    
116.         var f = “//zennuo.cdn.duapp.com/hi.css”;  //建议将此样式表下载到你的存储上调用  
117.         var l = “mw_added_css”;    
118.         var b = g();    
119.         var w = y();    
120.         var C = document.getElementsByTagName(“*”);    
121.         var k = null;    
122.         for (var L = 0; L < C.length; L++) {    
123.             var A = C[L];    
124.             if (v(A)) {    
125.                 if (E(A)) {    
126.                     k = A;    
127.                     break    
128.                 }    
129.             }    
130.         }    
131.         if (A === null) {    
132.             console.warn(“Could not find a node of the right size. Please try a different page.”);    
133.             return    
134.         }    
135.         c();    
136.         S();    
137.         var O = [];    
138.         for (var L = 0; L < C.length; L++) {    
139.             var A = C[L];    
140.             if (v(A)) {    
141.                 O.push(A)    
142.             }    
143.         }    
144.     })()    
145. }    

 

其中，第111行插入你自己的mp3地址，第116行样式表下载到你自己的存储，重命名为hi.css 。

 

二、high按钮

1. <button type=“button” class=“btn btn-link” οnclick=“hig();”>High一下</button>  

本文固定链接: http://www.zhuweisheng.com.cn/webdance.html

原创文章转载：让你的网站学会跳舞！ - 碎碎念ZWS