☰

鼠标悬停图片放大预览-大师兄2.5

电脑端可以跟随鼠标悬停图片放大预览 /n找了很多图片放大的脚本，都没有一个能用的，只有自己写。脚本还不够完美，但大部分网站的图片都可以已支持悬浮放大了。/n完美适应大小屏幕，图片超大也会图片等比例自适应浏览器。/n鼠标跟随也优化/n欢迎反馈，有时间就更新/n下一步开发不能识别非图片元素的地方

目前为 2021-10-09 提交的版本。查看 最新版本。

// ==UserScript==
// @name        鼠标悬停图片放大预览-大师兄2.5
// @date        05/27/2021
// @namespace    https://gf.qytechs.cn/zh-CN/users/724782-caogen1207
// @match       *://*/*
// @version     2.5
// @author      大师兄 [email protected]
// @description 电脑端可以跟随鼠标悬停图片放大预览 /n找了很多图片放大的脚本，都没有一个能用的，只有自己写。脚本还不够完美，但大部分网站的图片都可以已支持悬浮放大了。/n完美适应大小屏幕，图片超大也会图片等比例自适应浏览器。/n鼠标跟随也优化/n欢迎反馈，有时间就更新/n下一步开发不能识别非图片元素的地方
// @note        2.5 2021年10月4日更新超大图片显示问题 
// @require     https://code.jquery.com/jquery-3.6.0.min.js
// @icon        https://mms0.baidu.com/it/u=685985501,228922170&fm=27&gp=0.jpg&fmt=auto
// @grant       none
// ==/UserScript==
(function() {
    console.log("图片放大");

    fangdatupian();
    function fangdatupian() {

        //添加图片盒子
        $("body:eq(0)").append("<div id='dashixiong_preview' style='display:none;pointer-events:none;padding:0px;margin:0px;width:10px;height:10px;left:0px;top:0px;background-color:#ff0000;position:fixed;z-index:999999;'><img /></div>"); //弹出一个div里面放着图片
        jiantingimg();
        //jiantingBGimg();
        //jiantingWEIimg();
    }

    function jiantingimg(){
        //$("img").css({"cursor":"pointer","z-index":"9999"});
        //$("body:eq(0)").prepend(`<style> img{cursor:pointer;z-index:9999999}</style>`);

        $("body").on("mouseenter", "img",
                     function(e) {
            let imgw,
                imgh;
            let imgsrc = $(this).attr("src");
            $("#dashixiong_preview img").attr("src", imgsrc);
            [imgw, imgh] = getImageWidth(imgsrc);
            //console.log(imgw, imgh);
            //鼠标进到图片里就先执行图片位置
            tupianweizhi(e, imgw, imgh);
            $("#dashixiong_preview").stop(true, false).fadeIn();

            // 鼠标移动时给div挂事件
            $(this).mousemove(function(e) {
                tupianweizhi(e, imgw, imgh);
            });

            $(this).mouseleave(function(e) {
                $("#dashixiong_preview").stop(true, false).hide();
            });
        });
    }

    function jiantingBGimg(){
        $("body").on("mouseover", "div[style*='color']",
                     function(e) {
            Toast($(this).html());
        });
    }
    function jiantingWEIimg(){
        $("body").on("mouseenter", "div[style]", function(){
            //if($(this).attr("z-index")==1){
            console.log($(this).attr("style"));
            //}
        });
    }
    function getImageWidth(url) {
        let img = new Image();
        img.src = url;
        if (img.naturalWidth) { // 如果支持HTML5属性，直接使用
            return [img.naturalWidth, img.naturalHeight];
        } else {
            // 新建一个图片副本，来获取原始宽高
            let copy = new Image();
            copy.onload = function() {
                return [copy.width, copy.height];
            };
            copy.src = img.src;
        }

    }

    function tupianweizhi(e, img_width, img_height) {
        $("#dashixiong_preview img").height(img_height);
        $("#dashixiong_preview img").width(img_width);
        let jianxi = 20;
        let window_height = $(window).height();
        let window_width = $(window).width();

        if (img_height > window_height || img_width > window_width) {
            if (window_width*img_height/img_width > window_height) {
                $("#dashixiong_preview img").css({
                    "height": window_height,
                    "width": img_width * window_height / img_height
                });
            }else {
                $("#dashixiong_preview img").css({
                    "height": img_height * window_width / img_width,
                    "width": window_width
                });
            };
        };

        img_height = $("#dashixiong_preview img").height();
        img_width = $("#dashixiong_preview img").width();
        if (img_height + e.clientY > window_height && img_width + e.clientX < window_width) {
            //console.log("显示高度超过屏幕,显示在鼠标左右两侧");
            if (img_height + e.clientY + jianxi > window_height) {
                $("#dashixiong_preview").css({
                    top: (e.clientY - img_height - jianxi) < 0 ? 0 : e.clientY - img_height - jianxi,
                    left: e.clientX + jianxi,
                });
            }
        } else if (img_width + e.clientX + jianxi > window_width && img_height + e.clientY < window_height) {
            //console.log("显示宽度超过屏幕，显示在鼠标上下两侧");
            $("#dashixiong_preview").css({
                top: e.clientY + jianxi,
                left: (e.clientX - img_width - jianxi) < 0 ? 0 : e.clientX - img_width - jianxi,
            });
        } else if (img_width + e.clientX > window_width && img_height + e.clientY > window_height) {
            //console.log("显示高度和宽度超过屏幕");
            if (e.clientX - img_width - jianxi > 0 && e.clientY - img_height - jianxi > 0) {
                $("#dashixiong_preview").css({
                    top: e.clientY - img_height - jianxi,
                    left: e.clientX - img_width - jianxi,
                });
            } else if (e.clientX - img_width - jianxi < 0 && e.clientY - img_height - jianxi > 0) {
                $("#dashixiong_preview").css({
                    top: e.clientY - img_height - jianxi,
                    left: 0,
                });
            } else if (e.clientX - img_width - jianxi > 0 && e.clientY - img_height - jianxi < 0) {
                $("#dashixiong_preview").css({
                    top: 0,
                    left: e.clientX - img_width - jianxi,
                });
            } else if (e.clientX - img_width - jianxi < 0 && e.clientY - img_height - jianxi < 0) {
                $("#dashixiong_preview").css({
                    top: 0,
                    left: 0,
                });
            };

        } else {
            //console.log("显示在鼠标右下");
            $("#dashixiong_preview").css({
                top: e.clientY + jianxi,
                left: e.clientX + jianxi,
            });
        }
    }
    function Toast(msg,duration){
        duration=isNaN(duration)?3000:duration;
        let m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText="max-width:60%;min-width: 150px;padding:0 14px;height: 40px;color: rgb(255, 255, 255);line-height: 40px;text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 16px;";
        document.body.appendChild(m);
        setTimeout(function() {
            let d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function() { document.body.removeChild(m) }, d * 1000);
        }, duration);
    }

  function getViewprotOffset() {
    if (window.innerWidth) {
        return [window.innerWidth,window.innerHeight]
    } else {
        if (document.compatMode == "BackCompat") {
            return [document.body.clientWidth, document.body.clientHeight]
        } else {
            return [document.documentElement.clientWidth, document.documentElement.clientHeight]
        }
    }
  }
    
})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址