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

电脑端可以跟随鼠标悬停图片放大预览 2021/5/16上午12:56:31
目前为 2021-09-28 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name        鼠标悬停图片放大预览-大师兄
// @namespace   大师兄Scripts
// @match       *://*/*
// @grant       none
// @version     2.1
// @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==
window.onload = function() {
	console.log("图片放大");

	fangdatupian();
	function fangdatupian() {
		//添加图片盒子
		$("body:eq(0)").append("<div id='dashixiong_preview' style='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();

		$("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 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 = $(document).width();

		if (img_height > window_height) {
			console.log("图片高度尺寸大于屏幕高度");
			$("#dashixiong_preview img").css({
				"height": window_height,
				"width": img_width * window_height / img_height
			});
		};

		if (img_width > window_width && img_height < img_width) {
			console.log("图片宽度尺寸大于屏幕宽度");
			$("#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,
			});
		}

	}
};