哈哈，今天已经是大年初一啦，虽然还是凌晨，但是一点困意都没有啊因为白天没网睡了一下午，晚上一直抢红包，五福卡开奖抽到3.08元，原本以为真的太少了，看看周围的小伙伴也差不多就这个水平，也就心满意足啦。
咱们废话不多说哈，作为互联网的重度使用者和一名程序猿，平常在浏览他人博客的时候，总会会发现一些博主的网站上面有着一些特别好玩的功能，比如就说High一下，你鼠标放上去在轻轻点一下，顿时一股DJ感的音乐就冲入你的耳朵，然后随着节奏，特别好玩的事情发生了，网站上的一些字体开始摇摆起来，随着后面的节奏增强，图片也跟着抖，真是Happy啊，以前看到这功能时，一直不知道是怎么实现的，还以为是用了什么插件，结果今天审查元素的时候发现了奥秘。既然是在简书上写这篇文章，咱们就以简书网站为例做个示范，看好下面的Gif动图哦
随着音乐摇摆摇摆
如果你迫不及待想看一下这个效果的话，请点击这里哦
看完上面的动态图，小伙伴是不是蠢蠢欲动了呢，接下来让我们一起揭开它神秘的面纱吧~
摇起来的步骤：
1. 打开Google Chrome 浏览器
注：其他浏览器暂未做过测试，有兴趣的小伙伴们可以自行尝试一下，有可能会报错哦，因为试过几个
2. 打开一个网站
接下来输入网址，比如你经常浏览的一写网站，图文很多的网站效果肯定看起来棒棒哒
3. 鼠标右击网页任何网页的位置，打开审查元素
4. 点击Console（控制台）那一列
5. 将以下代码复制到控制台
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="//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="//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)}}})()
友情提示：若是觉得以上代码复制不变或格式不便于查看代码，可以查看我的Github Gist
6. 一定要确保音量不要太大，不然音乐响起来吓死我不负责啊
7.可以按 Enter(回车键)键了，慢慢欣赏吧
欣赏完这种效果之后，小伙伴们有没有惊到呢？其实这种效果叫做Harlem Shake，也叫哈林摇，因为你听的背景音乐就是这个名字， 相比现在流行的社会摇可是有的一拼啊
换种方式摇
小伙伴们要是觉得这也太麻烦了吧，哈哈，别急，有比这更简单的方法哦~
1.网站跳转
打开这个网站Harlemtool
或者这个网站Harlemify
在输入框里面输入你想抖起来的网站，比如我输入我的个人博客网站
2.Chrome 插件
居然没想到Chrome商店里面还有这种插件，装的人还不少啊，当然纯属自娱自乐啦，插件地址
插件安装后你就可以想抖哪就抖哪啊，有木有！！
好了，小伙伴们，赶快玩起来吧，有兴趣的可以研究一下代码，后续我会贴出讲解教程。
最后祝你们鸡年大吉，我可不想说吧，你懂得，文明你我他~
网友评论