// ==UserScript==
// @name         鼠标移动到页面图片显示预览图
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  鼠标移动到页面图片显示预览图，方便网页上小图查看
// @author       sgd
// @match        *://*/*
// @require      https://code.jquery.com/jquery-3.4.1.min.js
// @icon         https://www.easyicon.net/api/resizeApi.php?id=501159&size=128
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    // 添加样式
    var style = document.createElement("style");
    style.type = "text/css";
    var text = document.createTextNode("#pic {position: fixed;display: none;z-index:99999999;}#pic1 {width: 800px;height: auto;border-radius: 5px;-webkit-box-shadow: 5px 5px 5px 5px hsla(0, 0%, 5%, 1.00);box-shadow: 5px 5px 5px 0px hsla(0, 0%, 5%, 0.3);}");
    style.appendChild(text);
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);

    $("img").hover(function() {
        console.log("hover");
        var bigUrl = $(this).attr("src");
        // $(this).parents(".container-item").append("<div id='pic'><img src='" + bigUrl + "' id='pic1'></div>");
        $("body").append("<div id='pic'><img src='" + bigUrl + "' id='pic1'></div>");
        $("img").mousemove(function(e) {
            var wH = document.documentElement.clientHeight
            var wW = document.documentElement.clientWidth
            var imgW = $("#pic1").width()
            var imgH = $("#pic1").height()
            var cssArr = {
                "top": "",
                "left": "",
                "bottom": "",
                "right": ""
            }

            if (e.clientX + imgW > wW) {
                if (wW - e.clientX < imgW) {
                    cssArr.left = (e.clientX - imgW - 10) + "px";;

                } else {
                    cssArr.right = 0;
                }

            } else {
                cssArr.left = (e.clientX + 10) + "px";
            }

            if (e.clientY + imgH > wH) {
                cssArr.bottom = 0;
            } else {
                cssArr.top = (e.clientY + 10) + "px";
            }
            console.log($("#pic1").height(), wH)
            console.log(cssArr)
            $("#pic").css(cssArr).fadeIn("fast");
        });
    }, function() {
        $("#pic").remove();
    });


})();