// ==UserScript==
// @name        鼠标悬停图片放大预览
// @namespace   大师兄Scripts
// @match       *://*/*
// @grant       none
// @version     1.0
// @author      大师兄
// @description 找了很多图片放大的脚本，都没有一个能用的，只有自己写。脚本还不够完美，但大部分网站的图片都可以已支持悬浮放大了。
// @require     https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// @downloadURL none
// ==/UserScript==

window.onload = function () {
  console.log("图片放大");
  // $("*").on("mousedown",function (e) {
  //   if (3 == e.which) {
  //     console.log($(e.target)[0].tagName);
  //   }
  // });
	// console.log(document.querySelectorAll("body"));
  fangdatupian();
  function fangdatupian() {
    $("body")
      .on("mouseenter", "img:not(#dashixiong_preview)", function (e) {
        let img_src = $(this).attr("src");
        // console.log($(this));
        $("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:100;'><img src='" +
            img_src +
            "'  /></div>"
        ); //弹出一个div里面放着图片

        //鼠标离开这个div移除
        $(this)
          .stop(true, false)
          .mouseleave(function (e) {
            $("#dashixiong_preview").remove();
          });
        // 鼠标按下时给div挂事件
        $(this).mousemove(function (e) {
          tupianweizhi(e);
        });
        //鼠标进到图片里就先执行图片位置
        tupianweizhi(e);
      })
      .on("mouseleave", "img:not(#dashixiong_preview)", function () {
        //鼠标离开这个div移除
        $(this)
          .stop(true, false)
          .mouseleave(function (e) {
            $("#dashixiong_preview").remove();
          });
      });
  }
  function tupianweizhi(e) {
    let img_height = $("#dashixiong_preview img").height();
    let img_width = $("#dashixiong_preview img").width();
    let window_height = $(window).height();
    let window_width = $(document).width();

    if (
      //高度超过屏幕
      img_height + e.clientY > window_height &&
      img_width + e.clientX < window_width
    ) {
      if((e.clientY - img_height - 20)<0){
          $("#dashixiong_preview").css({
            top: e.clientY - img_height - 20,
            left: e.clientX + 20,
          });
        }
    } else if (
      //宽度超过屏幕
      img_width + e.clientX > window_width &&
      img_height + e.clientY < window_height
    ) {
      $("#dashixiong_preview").css({
        top: e.clientY + 20,
        left: e.clientX - img_width - 20,
      });
    } else if (
      //高度和宽度超过屏幕
      img_width + e.clientX > window_width &&
      img_height + e.clientY > window_height
    ) {
      $("#dashixiong_preview").css({
        top: e.clientY - img_height - 20,
        left: e.clientX - img_width - 20,
      });
    } else {
      $("#dashixiong_preview").css({
        top: e.clientY + 20,
        left: e.clientX + 20,
      });
    }
  }
};