大白兔联盟

文章搜索
搜索
当前位置:首页 > 前沿技术 > 编程技术 > 文章详情

【油猴脚本】自适应图片放大预览

大白兔  编程技术  2023-2-4  135  0评论

// ==UserScript==
// @name         自适应图片放大
// @namespace    [url=https://gitee.com/huelse/js-scripts/blob/master/auto-scale-image.js]https://gitee.com/huelse/js-scri ... auto-scale-image.js[/url]
// @version      1.0.0
// @description  自动放大图片标签
// @AuThor       THENDINGs
// @require      [url=https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js]https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js[/url]
// @match        *://*/*
// @Icon         [url=https://img1.imgtp.com/2023/02/02/pm8lKWm6.ico]https://img1.imgtp.com/2023/02/02/pm8lKWm6.ico[/url]
// @grant        unsafeWindow
// @run-at       document-body
// @license      GPLv3 License
// ==/UserScript==

(function() {
  'use strict';
  var _ = window._;

  let imgs = [];
  const observer = new MutationObserver(
    _.throttle(
      function () {
        imgs = document.querySelectorAll("img");
        // console.log('observer', imgs.length);
        imgListener();
      },
      300,
      { leading: false, trailing: true }
    )
  );
  observer.observe(document.body, {
    attributes: false,
    childList: true,
    subtree: true,
  });

  function getContainer() {
    const existContainer = document.querySelector(".big-img-container");
    if (!existContainer) {
      const container = document.createElement("div");
      container.className = "big-img-container";
      container.style.position = "fixed";
      container.style.top = 0;
      container.style.left = 0;
      container.style.zIndex = 999999;
      document.querySelector("html").appendChild(container);
      return container;
    }
    return existContainer;
  }

  function imgListener() {
    const container = getContainer();
    const halfWidth = window.innerWidth / 2;
    const halfHeight = window.innerHeight / 2;
    imgs.forEach((img) => {
      if (img.getAttribute("listener") === "true") {
        return;
      }
      // console.log('listen', img.getAttribute("src"));
      img.addEventListener("mouseenter", function (e) {
        clearContainer(container);
        const { x, y } = e;
        const width = x > halfWidth ? x : window.innerWidth - x;
        const height = y > halfHeight ? y : window.innerHeight - y;

        const imgWidth = e.target.width;
        const imgHeight = e.target.height;
        const rate = imgWidth / imgHeight;

        const bigImgHeight =
          (width / rate < height ? width / rate : height) - 10;
        const bigImgWidth =
          (height * rate < width ? height * rate : width) - 10;

        const containerX = x > halfWidth ? x - bigImgWidth - 5 : x + 5;
        const containerY = y > halfHeight ? y - bigImgHeight - 5 : y + 5;

        container.style.left = `${containerX}px`;
        container.style.top = `${containerY}px`;
        container.style.border = "1px solid #000";
        const bigImg = e.target.cloneNode();
        bigImg.style.maxHeight = "unset";
        bigImg.style.maxWidth = "unset";
        bigImg.style.height = `${bigImgHeight}px`;
        bigImg.style.width = `${bigImgWidth}px`;
        container.appendChild(bigImg);
      });
      img.addEventListener("mouseleave", function (e) {
        // const bigImg = container.firstElementChild;
        // console.log(bigImg.width, bigImg.height);
        clearContainer(container);
      });
      img.setAttribute("listener", "true");
    });
  }

  function clearContainer(container) {
    if (container.hasChildNodes()) {
      container.innerHTML = "";
      container.style.border = "";
    }
  }

})();
直接使用

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论