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

最新推荐文章于 2025-08-11 23:19:59 发布

weixin_33966095

最新推荐文章于 2025-08-11 23:19:59 发布

阅读量130

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5d00f2f9518825019319ae29

本文介绍了一段简单的JavaScript代码，通过双击事件触发网页界面的黑白反转及文字镜像效果。代码利用了transform和filter属性实现视觉变化，适用于网站趣味互动或特殊展示需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

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

代码

<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>
复制代码