前端恶趣味：我吸了juejin首页，好爽!

最新推荐文章于 2025-12-03 18:49:33 发布

转载最新推荐文章于 2025-12-03 18:49:33 发布 · 99 阅读

CC 4.0 BY-SA版权

原文链接：https://mp.weixin.qq.com/s?__biz=MzI4NDYxNTM0OQ==&mid=2247489796&idx=1&sn=727c5f1e83e70744099d27bfaccc2d48&chksm=ea6894390c03eb96aa2ec7cecd0f820c7228e0c5a53c164693531ae8468e737ed536ad896692&scene=126&sessionid=0

文章标签：

#前端

今天带来一篇和工作无关的文章。常规的前端业务，其实挺繁琐的，但其实我们可以做一些有意思的事情。当年百度首页的机器人动画，把整个页面内容打碎的特效，也是惊艳了一众前端啊。文本的作者，也是做了一个有意思的事情，把页面内容以动画的形式，逐个吸收掉，看动画有点像孙猴子的金箍棒在收妖精 感兴趣的同学可以看看，自己能不能有机会用上

下面是正文部分。

有位古人说过，人不是在烦的路上，就是正在烦！

最近在逛某乎，总是会刷到很多让人焦虑的话题！比如这样：

或者这样：

还有这样：

然后，就这么一焦虑，我就不怀好意的把目光转向了juejin，要不要把juejin砸了，让面向搜索编程者没有地儿找，少一些竞争者？

首先引入脑海的是二向箔，作为“吾主”最强大武器之一，我打算用这个收 juejin 首页！

说干就干！建个demo，打个样品：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Add Span to Each Character</title>
</head>
<body style="background-color: #fff;">
  <!-- Your HTML content here -->
  <p>This is some text.</p>
  <div>
    <p>More text here.</p>
    <image src="./3333.png" />
    <video></video>
  </div>
  <img src="./3333.png" />
  <style>
    .aaa {
      height: 100px;
    }
  </style>
</body>
</html>

再来一段JS，用来模拟一根棍进入效果：

<script>
    'use strict';
    const targetNodeObject = document.body;
    const styleElement = document.createElement('style');
    const floatBall = document.createElement('div');
    let center = { centerX: 0, centerY: 0 };
    const timer = 32;
    styleElement.textContent = `
          .highlighted-text {
            width: 4px;
            height: 4px;
            margin: 0 2px;
            display: inline-block;
            overflow: hidden;
            background-color: #f00;
            transition: all 1s;
          }
          .highlighted-image {
            margin: 0 2px !important;
            display: inline-block !important;
            overflow: hidden !important;
            background-color: #000 !important;
            transition: all 1s;
            transform-origin: center top;
          }
          .floating-ball {
            width: 4px;
            position:fixed;
            height: 100px;
            background: #000 !important;
            animation: floatAnimation 0.2s linear infinite;
            left: 50%;
            top: -800px;
            transition: top 1s ease;
            z-index:9999;
            border:1px solid #fff;
            transform-origin: center center;
          }
          @keyframes floatAnimation {
            to {
              transform: rotate(360deg);
            }
          }
          .inhaleAnimation{
            position: fixed;
            z-index:9999;
            animation: inhaleAnimation 2s ease-out forwards;
          }
          @keyframes inhaleAnimation {
            to {
              transform: scale(0);
            }
          }
        `;
    document.head.appendChild(styleElement);

    createAttack();
    
    // 创建进攻武器 - 棍
    function createAttack(callback) {
      floatBall.classList.add('floating-ball');
      targetNodeObject.appendChild(floatBall);
      setTimeout(() => {
        floatBall.style.top = "100px";
        setTimeout(() => {
          if (callback) callback();
        }, 1000)
      }, 100)
    }
</script>

大致效果是这样：

好了，第一步完成，接下去想攻击效果，基本思路就是模拟二向箔。二向箔是三维物体二维化，那我们juejin首页是二维物体，那我就一维化。效果就是文字化成点。图片变成线。

完整代码如下：

<script>
    'use strict';
    const targetNodeObject = document.body;
    const styleElement = document.createElement('style');
    const floatBall = document.createElement('div');
    let center = { centerX: 0, centerY: 0 };
    const timer = 32;
    styleElement.textContent = `
          .highlighted-text {
            width: 4px;
            height: 4px;
            margin: 0 2px;
            display: inline-block;
            overflow: hidden;
            background-color: #f00;
            transition: all 1s;
          }
          .highlighted-image {
            margin: 0 2px !important;
            display: inline-block !important;
            overflow: hidden !important;
            background-color: #000 !important;
            transition: all 1s;
            transform-origin: center top;
          }
          .floating-ball {
            width: 4px;
            position:fixed;
            height: 100px;
            background: #000 !important;
            animation: floatAnimation 0.2s linear infinite;
            left: 50%;
            top: -800px;
            transition: top 1s ease;
            z-index:9999;
            border:1px solid #fff;
            transform-origin: center center;
          }
          @keyframes floatAnimation {
            to {
              transform: rotate(360deg);
            }
          }
          .inhaleAnimation{
            position: fixed;
            z-index:9999;
            animation: inhaleAnimation 2s ease-out forwards;
          }
          @keyframes inhaleAnimation {
            to {
              transform: scale(0);
            }
          }
        `;
    document.head.appendChild(styleElement);



    function createBall(callback) {
      floatBall.classList.add('floating-ball');
      targetNodeObject.appendChild(floatBall);
      setTimeout(() => {
        floatBall.style.top = "100px";
        setTimeout(() => {
          if (callback) callback();
        }, 1000)
      }, 100)
    }
    createBall(() => {
      init();
      center = getElementCenter(floatBall);
    });
    // 获取棍的中心点位置
    function getElementCenter(element) {
      const rect = element.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;

      return { centerX, centerY }
    }
    
    function init() {
      const steps = [];
      const elements = [];

    // 获取当前信息
      function getNodes(element) {
        const textNodes = [];
        const imageNodes = [];

        function traverse(node) {
          hasBackgroundColor(node)
          if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== '') {
            textNodes.push(node);
          } else if (isImageNode(node)) {
            imageNodes.push(node);
          } else if (node.nodeType === Node.ELEMENT_NODE && !isExcludedNode(node)) {
            for (const childNode of node.childNodes) {
              traverse(childNode);
            }
          }
        }

        function isExcludedNode(node) {
          const excludedTags = ['SCRIPT', 'STYLE', 'LINK', 'IFRAME', 'path'];
          return excludedTags.includes(node.tagName);
        }

// 校验元素是否有背景颜色
        function hasBackgroundColor(node) {
          try {
            const computedStyle = window.getComputedStyle(node);
            const backgroundColor = computedStyle.backgroundColor;
            if (backgroundColor !== 'rgba(0, 0, 0, 0)' && backgroundColor !== 'transparent') {
              node.style.backgroundColor = 'rgba(255, 255, 255, 1)'
            }
          } catch (e) {
          }
        }

        traverse(element);
        return { textNodes, imageNodes };
      }

        // 添加步骤到执行队列
      function addStep(func, node) {
        steps.push(func.bind(this));
        elements.push(node);
      }
      // 开始步骤
      function startStep() {
        const interTimer = setInterval(() => {
          if (steps.length > 0) {
            const func = steps.shift();
            const element = elements.shift();
            if (func) {
              func();
              if (element) {
                const rect = element.getBoundingClientRect();
                element.style.top = `${rect.top}px`;
                element.style.left = `${rect.left}px`;
                addStep(() => {
                  element.classList.add('inhaleAnimation');
                  element.style.top = `${center.centerY}px`;
                  element.style.left = `${center.centerX}px`;
                  element.addEventListener('animationend', function () {
                    element.remove();
                  });
                })
              }
            }
          } else {
            clearInterval(interTimer);
          }
        }, timer)
      }
      
      const { textNodes, imageNodes } = getNodes(targetNodeObject);
      // 处理文字
      function textFn(node) {
        const textContent = node.nodeValue.trim();
        const newSpan = document.createElement('span');
        const newContent = Array.from(textContent).map(char => {
          const charSpan = document.createElement('span');
          charSpan.textContent = char;
          addStep(() => {
            charSpan.classList.add("highlighted-text");
          }, charSpan);
          newSpan.appendChild(charSpan);
          return charSpan.outerHTML;
        }).join('');
        node.parentNode.replaceChild(newSpan, node);
      };
      // 处理图片
      function imageFn(node) {
        const charSpan = document.createElement('span');
        node.classList.add("highlighted-image");
        addStep(() => {
          const rect = node.getBoundingClientRect();
          charSpan.style.width = `${node.width || node.clientWidth || rect.width}px`;
          charSpan.style.height = `${node.height || node.clientHeight || rect.width}px`;
          charSpan.classList.add("highlighted-image");
          node.replaceWith(charSpan);
          addStep(() => {
            charSpan.style.width = "4px";
            //charSpan.style.transform = `scale(1) rotate(${30}deg)`
          }, charSpan);
        });
      }
      textNodes.forEach(node => {
        if (node.nodeValue.indexOf('@font-face') !== -1) { return; }
        textFn(node);
      });
      imageNodes.forEach(node => {
        imageFn(node);
      });
      
    // 判断是否为图片
    function isImageNode(node) {
      if (node.tagName === 'BODY') { return; }
      const imageTags = ['IMG', 'IMAGE', 'VIDEO', 'svg', "FORM", "svg"];
      return imageTags.includes(node.tagName) &&
        !(node.tagName === 'BODY' && node.classList.contains('floating'));
    }

      startStep();
    }
  </script>

效果为：

效果好像还不错！

现在，将上面JS代码压缩

通过在url输入框内，输入Javascrip:【上面压缩的代码】

将代码放入juejin某页，一起look下效果(截取一段)：

看到这里的朋友也知道，这个也就一个前端佬的自嗨了。

但还是想说....