☰

鼠标移动到页面图片显示预览图

解决和原网页jquery版本冲突

// ==UserScript==
// @name         鼠标移动到页面图片显示预览图
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  解决和原网页jquery版本冲突
// @description  增加部分的网站小图大图模式
// @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
// ==/UserScript==

(function() {
    'use strict';
    // 解决和原网页jquery版本冲突
    var jq = jQuery.noConflict(true);

    var big = [{
        "oldVal":"thumb",
        "repVal":"original"
    }];
    // 添加样式
    var style = document.createElement("style");
    style.type = "text/css";
    var text = document.createTextNode("#pic {position: fixed;display: none;z-index:99999999;}#pic1 {min-width:100px;height:auto;max-width:100%;max-height:100%; 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);

    jq("img").hover(function() {
        console.log("hover");
        var bigUrl = jq(this).attr("src");
        jq.each(big,function(index,v){
            console.log("===="+v.oldVal);
            bigUrl = bigUrl.replace(v.oldVal, v.repVal);
            console.log("bigUrl=%s", bigUrl);
        });
        // $(this).parents(".container-item").append("<div id='pic'><img src='" + bigUrl + "' id='pic1'></div>");
        jq("body").append("<div id='pic'><img src='" + bigUrl + "' id='pic1'></div>");
        jq("img").mousemove(function(e) {
            var wH = document.documentElement.clientHeight
            var wW = document.documentElement.clientWidth
            var imgW = jq("#pic1").width()
            var imgH = jq("#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(jq("#pic1").height(), wH)
            console.log(cssArr)
            jq("#pic").css(cssArr).fadeIn("fast");
        });
    }, function() {
        jq("#pic").remove();
    });

})();