• 64160

    文章

  • 632

    评论

  • 59

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

一段实现网站倒转特效的javascript代码

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>

简介

之前 一直有人恼火我的网站双击会变成黑白,然后文字颠倒,其实实现这个很简单,把下面这段代码放到你的网站首页即可

代码

<script>
(function () {
  var __timeout;
  var __lastTap = 0;
  var hell = function hell() {
    var hell = document.getElementById('hell');
    if (hell) {
      hell.parentNode.removeChild(hell);
    } else {
      var style = document.createElement('style');
      style.id = 'hell';
      style.textContent = 'body{ background:black; -webkit-transform: scale(-1,1); -ms-transform: scale(-1,1); transform: scale(-1,1); -webkit-filter: sepia(0) saturate(0) invert(1) brightness(1) c
ontrast(1); filter: sepia(0) saturate(0) invert(1) brightness(1) contrast(1); }';
      document.head.appendChild(style);
    }
  };
  document.addEventListener('dblclick', hell, false);
  document.addEventListener('touchend', function () {
    var currentTime = new Date().getTime();
    var tapLength = currentTime - __lastTap;
    clearTimeout(__timeout);
    if (tapLength < 500 && tapLength > 0) {
      hell();
    }
    __lastTap = currentTime;
  });
})();
</script>

欢迎关注Bboysoul的博客www.bboysoul.com

Have Fun


 转载至链接:https://my.oschina.net/u/3778921/blog/3061327。

695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

欢迎来到梁钟霖个人博客网站。本个人博客网站提供最新的站长新闻,各种互联网资讯。 还提供个人博客模板,最新最全的java教程,java面试题。在此我将尽我最大所能将此个人博客网站做的最好! 谢谢大家,愿大家一起进步!

转载原创文章请注明出处,转载至: 梁钟霖个人博客www.liangzl.com

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤
注册梁钟霖个人博客