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

电脑端可以跟随鼠标悬停图片放大预览 2021/5/16上午12:56:31
目前为 2021-09-30 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name        鼠标悬停图片放大预览-大师兄2.3
// @namespace   大师兄Scripts
// @match       *://*/*
// @grant       none
// @version     2.3
// @author      大师兄 [email protected]
// @description 电脑端可以跟随鼠标悬停图片放大预览 2021/5/16上午12:56:31
// @require     https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// @icon       https://mms0.baidu.com/it/u=685985501,228922170&fm=27&gp=0.jpg&fmt=auto
// ==/UserScript==
(function() {
	console.log("图片放大");

	fangdatupian();
	function fangdatupian() {
        //$("body:eq(0)").prepend(`<style> img{cursor:pointer;z-index:9999999}</style>`);
		//添加图片盒子
		$("body:eq(0)").append("<div id='dashixiong_preview' style='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里面放着图片
		$("#dashixiong_preview").stop(true, false).hide();
        //$("img").css({"cursor":"pointer","z-index":"9999"});

		$("body").on("mouseover", "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 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,
			});
		}

	}
})();