// ==UserScript==
// @name        鼠标悬停图片放大预览-大师兄
// @namespace   大师兄Scripts
// @match       *://*/*
// @grant       none
// @version     2.0
// @author      大师兄
// @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
// @downloadURL none
// ==/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) {
			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,
			});
		}

	}
};