装B技巧，让页面也 High 起来-一起摇摆

记得魔性的小苹果和抖音吗，作为前端的你，有想过让页面也 High 起来、舞动起来吗？

先看效果：

下面这段代码可直接在控制台执行，略长。可直接跳到本小节末，使用简短 JS 引入的方式进行体验（带音乐效果哟）

setTimeout(letDance, 1000);
var bgmSrc =
  'https://nd002723.github.io/carnival/audio/Martin%20Jensen%20-%20Fox%20(Loop%20Remix).mp3';
var cssHref = 'https://nd002723.github.io/carnival/css/high.css';
function letDance() {
  function loadCss() {
    //将css文件引入页面
    var myCss = document.createElement('link');
    myCss.setAttribute('type', 'text/css');
    myCss.setAttribute('rel', 'stylesheet');
    myCss.setAttribute('href', cssHref); //css文件地址
    myCss.setAttribute('class', l);
    document.body.appendChild(myCss);
  }

  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 getSize(e) {
    //获取目标的宽高
    return {
      height: e.offsetHeight,
      width: e.offsetWidth,
    };
  }

  function checkSize(i) {
    //判断目标大小是否符合要求
    var s = getSize(i); //获取目标的宽高
    return (
      s.height > minHeight &&
      s.height < maxHeight &&
      s.width > minWidth &&
      s.width < maxWidth
    ); //判断目标是否符合条件
  }

  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 setBgm() {
    //设置音乐
    var e = document.createElement('audio');
    e.setAttribute('class', l);
    e.src = bgmSrc; //bgm地址
    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 minHeight = 3; //最小高度
  var minWidth = 3; //最小宽度
  var maxHeight = 800; //最大高度
  var maxWidth = 1400; //最大宽度
  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 l = 'mw_added_css'; //最终要移除的css
  var b = g();
  var w = y();
  var C = document.getElementsByTagName('*');
  var k = null;
  for (var L = 0; L < C.length; L++) {
    var targetDiv = C[L];
    if (checkSize(targetDiv)) {
      if (E(targetDiv)) {
        k = targetDiv;
        break;
      }
    }
  }
  if (targetDiv === null) {
    //如果没找到合适大小的
    console.warn('没能找到合适的大小. 换一个页面试试？.');
    return;
  }

  loadCss(); //将自定义css文件引入页面
  setBgm(); //添加背景音乐

  var O = [];
  for (var L = 0; L < C.length; L++) {
    var targetDiv = C[L];
    if (checkSize(targetDiv)) {
      O.push(targetDiv);
    }
  }

  //网页整体倾斜效果（这块儿本来是JQuery实现的，为了避免引入JQuery，做了改动。）
  var style = document.createElement('style');
  style.type = 'text/css';
  try {
    style.appendChild(
      document.createTextNode(
        'body{overflow-x:hidden;transform: rotate(1deg);-webkit-transform: rotate(1deg);-moz-transform: rotate(1deg);-o-transform: rotate(1deg);-ms-transform: rotate(1deg)}'
      )
    );
  } catch (ex) {
    style.styleSheet.cssText = 'body{background-color:red}'; //针对IE
  }
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(style);
}

或者更简洁一点，在页面 URL 栏或者控制台键入以下代码直接体验：

在浏览器地址栏黏贴以下内容的话，有三点需要注意，一是必须是已有内容的页面；二是如果是通过复制黏贴代码到浏览器地址栏的话，IE 及 Chrome会自动去掉代码开头的javascript：，所以需要手动添加起来才能正确执行，而 Firefox 中虽然不会自动去掉，但它根本就不支持在地址栏运行 JS 代码；三是引用的carnival.js会依赖JQuery（没有的话也没事，只是页面少了一个倾斜的效果）。

javascript： void (function () {
  var d = document,
    a = 'setAttribute',
    s = d.createElement('script');
  s[a]('tyle', 'text/javascript');
  s[a]('src', 'https://nd002723.github.io/carnival/js/carnival.js');
  d.head.appendChild(s);
})();

一个能让你的网站 high 起来的 js

新的免费申请九位靓号QQ入口

如果号码不喜欢的刷新页面换号码即可

每天只能3次刷新机会，繁忙了就得换IP用浏览器刷新又有3次刷新的机会

PS：提示抢光就是手机号的问题，换个就行大家注册成功之后注意先截屏保存号码哦

注册好记得保存！！！

注册地址：https://ssl.zc.qq.com/v3/index-chs.html?type=3#（复制到浏览器打开）

如果喜欢我分享的可以点赞并关注哦！

eight="360" marginheight="0" src="https://player.v.news.cn/api/v1/getPlayPage?uuid=1_1a20e72966714fc295a9d816818dc691&vid=4e684d23336950243f7f6e673a93af98&playType=0" frameborder="0" width="640" allowtransparency="" marginwidth="0" scrolling="no" allowscriptaccess="always" video_height="360" video_width="640" allowfullscreen="true" video_src="https://vodpub1.v.news.cn/original/20210818/b72ff7df02684f29b183bebf278d7220.mp4

" vid="4e684d23336950243f7f6e673a93af98" uuid="1_1a20e72966714fc295a9d816818dc691" filelength="2033600000" filesize="56424665.0">

新华社成都8月18日电 题：这群医生，打开“天线宝宝”的“折叠人生”

新华社记者董小红、王曦、刘梦琪

随身携带三把精致的小扳手，走路时兜里叮叮当当响，一听见走廊里出现这熟悉的声音，病房里的“天线宝宝”们就围了过来，让黄华强医生帮忙“拧螺丝”。

“我头环上的螺丝松了”“我骨盆这儿拧得有点紧了”……黄华强熟练地从兜里掏出小扳手，三两下就搞定了。“感觉我不像医生，倒像一个维修师傅。”他笑着说。

黄华强是成都市第三人民医院骨科医生，每天他都要带着小扳手查房。病房里住着被称为“天线宝宝”的患者，他们的头部和腰部分别套着一个钢环，并用4根高过头顶的支撑杆连接固定，看起来就像动画片中的“天线宝宝”。

这套装备名叫“头盆环”，是黄华强的师傅、成都市第三人民医院骨科主任梁益建经过多年研究，专门为“天线宝宝”们发明的治疗工具。

“天线宝宝”们都是重度脊柱畸形患者，很多人都是先天性脊柱畸形，随着年纪增长情况越来越糟糕。大部分患者直不起腰，一些患者整个人甚至是“折叠”起来的。脊柱畸形改变的不仅是他们的外形，与之相生相伴的呼吸衰竭、心脏衰竭，也在不断侵蚀着他们的生命。

“我们通过‘头盆环’牵引，让脊柱逐渐从重弯变为轻弯，再实施手术。”黄华强说，术后继续通过“头盆环”牵引，治疗效果会很好。

最近，黄华强所在的医院脊柱畸形团队为17岁的平平（化名）实施了矫正手术，手术很成功。平平的妈妈欧女士激动地对记者说：“孩子终于能挺直腰，再也不用看别人异样的眼光了。”

以前因为重度脊柱畸形，17岁的平平身高仅有1.38米，身体呈现“折叠”状态。“以前孩子的背上能看到一个‘折叠’造成的‘折角’，摸着是突出的，现在整个背是平的了。”欧女士说，孩子手术后睁开眼的第一件事就是问“我的背平了吗”，作为母亲，看着孩子受了这么多年的苦，她止不住落泪，“现在孩子终于跟其他人一样了。”

让更多像平平这样的患者能够挺直腰杆，是医院脊柱畸形团队孜孜不倦的追求。目前，他们团队每年都要治疗来自全国各地的1万多名脊柱畸形患者，其中约400名是极重度脊柱畸形患者。

近年来，脊柱畸形团队还突破了国际公认极重度脊柱畸形手术的三大禁区——极重度脊柱畸形无法矫正、极重度脊柱畸形合并脊髓畸形无法矫正、极重度脊柱畸形合并极重度呼吸功能障碍无法矫正；提出极重度脊柱侧弯患者术后应达到“三平一正”的治疗标准……这些突破背后是一个个“天线宝宝”们被“打开”的人生。

极重度脊柱畸形矫正手术常常一做就是六七个小时，现在，梁益建的工作每天都排得满满当当，经常是上午看门诊，中午就连轴转做手术。有好几次，做完手术后的他实在太累了，就直接躺在手术室的地上睡着了。“要全心全意为患者治病，为了让越来越多患者直起腰杆，我们要不断突破。”梁益建说，这也是整个团队的目标。

如今，医院的脊柱畸形团队已经发展到8个人，各有专攻方向，也建立起通力合作机制。为了让“天线宝宝”们重拾自信，他们还经常组织歌唱比赛。“在治疗中，音乐起到了非常大的作用，如果肺活量不达标，做手术是非常危险的。我们考虑了很多提高肺活量的方法，都比较枯燥，但音乐是最动人的。不仅能起到治疗效果，还能让患者感受到快乐，越来越阳光。”黄华强说。

在师傅的带领下，徒弟黄华强也有了新的目标，不仅要把这一套治疗技术传承下去，还要走得更远。“我正在研究如何把3D打印技术与矫正手术结合起来，让治疗效果更好。”他说。

在线咨询

上一篇：Python小案例71- HTML基础及语法
下一篇：后端动态生成word或pdf的几种常见方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

装B技巧，让页面也 High 起来-一起摇摆

您的项目需求