哈哈，今天已經(jīng)是大年初一啦汹来，雖然還是凌晨续膳，但是一點困意都沒有啊因為白天沒網(wǎng)睡了一下午，晚上一直搶紅包收班，五阜夭恚卡開獎抽到3.08元，原本以為真的太少了摔桦，看看周圍的小伙伴也差不多就這個水平社付，也就心滿意足啦承疲。
咱們廢話不多說哈，作為互聯(lián)網(wǎng)的重度使用者和一名程序猿鸥咖，平常在瀏覽他人博客的時候燕鸽，總會會發(fā)現(xiàn)一些博主的網(wǎng)站上面有著一些特別好玩的功能，比如就說High一下啼辣，你鼠標放上去在輕輕點一下啊研，頓時一股DJ感的音樂就沖入你的耳朵，然后隨著節(jié)奏鸥拧，特別好玩的事情發(fā)生了党远，網(wǎng)站上的一些字體開始搖擺起來，隨著后面的節(jié)奏增強富弦，圖片也跟著抖沟娱，真是Happy啊，以前看到這功能時腕柜，一直不知道是怎么實現(xiàn)的济似，還以為是用了什么插件，結(jié)果今天審查元素的時候發(fā)現(xiàn)了奧秘媳握。既然是在簡書上寫這篇文章碱屁，咱們就以簡書網(wǎng)站為例做個示范，看好下面的Gif動圖哦
如果你迫不及待想看一下這個效果的話蛾找，請點擊這里哦
看完上面的動態(tài)圖，小伙伴是不是蠢蠢欲動了呢赵誓，接下來讓我們一起揭開它神秘的面紗吧~
搖起來的步驟：
1. 打開Google Chrome 瀏覽器
注：其他瀏覽器暫未做過測試打毛，有興趣的小伙伴們可以自行嘗試一下，有可能會報錯哦俩功，因為試過幾個
2. 打開一個網(wǎng)站
接下來輸入網(wǎng)址幻枉，比如你經(jīng)常瀏覽的一寫網(wǎng)站，圖文很多的網(wǎng)站效果肯定看起來棒棒噠
3. 鼠標右擊網(wǎng)頁任何網(wǎng)頁的位置诡蜓，打開審查元素
4. 點擊Console（控制臺）那一列
5. 將以下代碼復(fù)制到控制臺
javascript:(function(){function c(){var e=document.createElement("link");e.setAttribute("type","text/css");e.setAttribute("rel","stylesheet");e.setAttribute("href",f);e.setAttribute("class",l);document.body.appendChild(e)}function h(){var e=document.getElementsByClassName(l);for(var t=0;t<e.length;t++){document.body.removeChild(e[t])}}function p(){var e=document.createElement("div");e.setAttribute("class",a);document.body.appendChild(e);setTimeout(function(){document.body.removeChild(e)},100)}function d(e){return{height:e.offsetHeight,width:e.offsetWidth}}function v(i){var s=d(i);return s.height>e&&s.height<n&&s.width>t&&s.width<r}function m(e){var t=e;var n=0;while(!!t){n+=t.offsetTop;t=t.offsetParent}return n}function g(){var e=document.documentElement;if(!!window.innerWidth){return window.innerHeight}else if(e&&!isNaN(e.clientHeight)){return e.clientHeight}return 0}function y(){if(window.pageYOffset){return window.pageYOffset}return Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function E(e){var t=m(e);return t>=w&&t<=b+w}function S(){var e=document.createElement("audio");e.setAttribute("class",l);e.src=i;e.loop=false;e.addEventListener("canplay",function(){setTimeout(function(){x(k)},500);setTimeout(function(){N();p();for(var e=0;e<O.length;e++){T(O[e])}},15500)},true);e.addEventListener("ended",function(){N();h()},true);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>";document.body.appendChild(e);e.play()}function x(e){e.className+=" "+s+" "+o}function T(e){e.className+=" "+s+" "+u[Math.floor(Math.random()*u.length)]}function N(){var e=document.getElementsByClassName(s);var t=new RegExp("\\b"+s+"\\b");for(var n=0;n<e.length;){e[n].className=e[n].className.replace(t,"")}}var e=30;var t=30;var n=350;var r=350;var i="http://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";var s="mw-harlem_shake_me";var o="im_first";var u=["im_drunk","im_baked","im_trippin","im_blown"];var a="mw-strobe_light";var f="http://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";var l="mw_added_css";var b=g();var w=y();var C=document.getElementsByTagName("*");var k=null;for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){if(E(A)){k=A;break}}}if(A===null){console.warn("Could not find a node of the right size. Please try a different page.");return}c();S();var O=[];for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){O.push(A)}}})()
友情提示：若是覺得以上代碼復(fù)制不變或格式不便于查看代碼熬甫，可以查看我的Github Gist
6. 一定要確保音量不要太大，不然音樂響起來嚇死我不負責(zé)啊
7.可以按 Enter(回車鍵)鍵了蔓罚，慢慢欣賞吧
欣賞完這種效果之后椿肩，小伙伴們有沒有驚到呢？其實這種效果叫做Harlem Shake豺谈，也叫哈林搖郑象，因為你聽的背景音樂就是這個名字， 相比現(xiàn)在流行的社會搖可是有的一拼啊
換種方式搖
小伙伴們要是覺得這也太麻煩了吧茬末，哈哈厂榛，別急，有比這更簡單的方法哦~
1.網(wǎng)站跳轉(zhuǎn)
打開這個網(wǎng)站Harlemtool
或者這個網(wǎng)站Harlemify
在輸入框里面輸入你想抖起來的網(wǎng)站，比如我輸入我的個人博客網(wǎng)站
2.Chrome 插件
居然沒想到Chrome商店里面還有這種插件击奶，裝的人還不少啊辈双，當然純屬自娛自樂啦，插件地址
插件安裝后你就可以想抖哪就抖哪啊柜砾，有木有Ｅ韧！
好了局义，小伙伴們喜爷，趕快玩起來吧，有興趣的可以研究一下代碼萄唇，后續(xù)我會貼出講解教程檩帐。
最后祝你們雞年大吉，我可不想說吧另萤，你懂得湃密，文明你我他~
