update:图床图片加入鼠标划过事件v1

src/main/java/top/lvzhiqiang/service/impl/CoinServiceImpl.java

@@ -1393,8 +1393,8 @@ public class CoinServiceImpl implements CoinService {
             j++;
         }
 
-        // 流通市值
         for (CoinWatchlist coinWatchlist : watchlistList) {
+            // 流通市值
             if (null != coinWatchlist.getTotalMarketValue()) {
                 BigDecimal divide = coinWatchlist.getTotalMarketValue().divide(bigDecimal10000, 8, RoundingMode.HALF_UP);
                 if (divide.compareTo(bigDecimal10000) <= 0) {

src/main/resources/static/coin.html

@@ -10,9 +10,11 @@
     <meta name="renderer" content="webkit|ie-comp|ie-stand">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <link rel="shortcut icon" href="cover/bitcoin.ico" type="image/x-icon">
+    <link rel="stylesheet" href="css/my-av.css" type="text/css">
     <script src="js/jquery-3.6.0.min.js"></script>
     <script type="text/javascript" src="js/login.js"></script>
     <script type="text/javascript" src="js/my-coin.js"></script>
+    <script type="text/javascript" src="js/my-av.js"></script>
 </head>
 <style type="text/css">
     .font {
@@ -92,7 +94,6 @@
         left: 50%;
         transform: translate(-50%, -25%);
     }
-
 </style>
 <script type="text/javascript">
     function show() {

src/main/resources/static/css/my-av.css

@@ -0,0 +1,140 @@
+.sav-menu {
+    font-family: Microsoft YaHei, sans-serif;
+    position: fixed;
+    display: block;
+    text-align: left;
+    color: #000;
+    background: rgba(255, 255, 255, .8);
+    backdrop-filter: blur(5px);
+    border-radius: 4px;
+    padding: 6px 12px 10px 9px;
+    /* margin-top: -2px; */
+    z-index: 99999;
+    font-size: 14px;
+    max-width: 700px;
+    box-shadow: 4px 4px 12px #ccc, -1px -1px 5px #eee;
+    border-top: 2px solid #fff;
+    border-left: 2px solid #fff;
+    transform: scale(1);
+    transition: 0.2s;
+    transition-timing-function: ease-out;
+    animation: savOpenAnim 0.15s;
+}
+
+.savlink {
+    margin: 4px 4px 4px 4px;
+    border-radius: 4px;
+    padding: 3px 5px;
+    background: #fff;
+    display: inline-block;
+    transition: 0.2s;
+    transition-timing-function: ease-out;
+    box-shadow: -2px -2px 4px rgb(240 240 240), 2px 2px 4px rgb(70 70 70 / 50%);
+    cursor: pointer;
+    user-select: none;
+}
+
+.sav-menu .savlink a {
+    color: #459df5;
+    text-decoration: none;
+    transition: 0.4s;
+}
+
+avdivsinfo {
+    text-indent: -2.5em;
+    line-height: normal;
+}
+
+avdivsinfo avdiv {
+    display: block;
+    margin-bottom: 5px;
+    text-shadow: 0 0 #d9d9d9;
+    transition: 0.2s;
+    padding-left: 2.5em;
+}
+
+avdivsinfo a, avdivsinfo a:visited, avdivsinfo a:link {
+    color: #000;
+    transition: 0.2s;
+}
+
+avdivimg {
+    position: relative;
+    display: block;
+    text-indent: initial;
+    user-select: none;
+}
+
+avdiv .avimg {
+    height: 400px;
+    max-width: 100%;
+    max-height: 500px;
+    cursor: pointer;
+    box-shadow: -2px -2px 4px rgb(230 230 230), 2px 2px 2px rgb(70 70 70 / 50%);
+    border-top: 1px solid #fff;
+    border-left: 1px solid #fff;
+    border-radius: 4px;
+    transform-origin: center 80%;
+    transition: 0.2s;
+    transition-timing-function: ease-out;
+}
+
+.savCloseAnim {
+    animation: savCloseAnim 0.15s;
+}
+
+.savLoadingContainer {
+    display: block;
+    overflow: hidden;
+    width: 100%;
+    transition: 0.1s;
+    height: 3px;
+    margin-top: 5px;
+}
+
+.savLoading {
+    display: block;
+    font-size: 0;
+    height: 100%;
+    width: 200%;
+    position: relative;
+    transition: 0.2s;
+    animation: sav-loading-animation 3s linear infinite;
+}
+
+.savLoading svg {
+    border: none;
+    height: 100%;
+    width: 50%;
+    position: absolute;
+}
+
+.stop1, .stop3 {
+    stop-color: #fff0;
+}
+
+.stop2 {
+    stop-color: #6dc4ed;
+    transition: 1s;
+}
+
+.savLoading svg:last-child {
+    left: -50%;
+}
+
+.stop2.javbusloading {
+    stop-color: #71d99b;
+}
+
+avdiv .imageBig {
+    max-height: 600px;
+    transform: scale(1.3);
+    border-radius: 10px;
+    border-top: 2px solid #fff;
+    border-left: 2px solid #fff;
+    box-shadow: -2px -2px 4px rgb(160 160 160), 4px 4px 4px rgb(70 70 70 / 60%);
+}
+
+avdiv .imageBig:hover {
+    box-shadow: -4px -4px 8px rgb(160 160 160), 6px 6px 8px rgb(70 70 70 / 60%);
+}

src/main/resources/static/js/my-av.js

@@ -0,0 +1,359 @@
+var timerGetInfo;   // 延时获取信息
+var timerMouseLeave;   // 鼠标离开番号。鼠标进入菜单时的定时器, 超时不进入, 菜单消失
+var timerMouseLeaveMenu;    // 鼠标离开菜单
+var divTarget; // 鼠标当前经过的番号节点
+var avInfo = {};    // 临时存储相关信息
+var Imgscall = 1.0; // 图片默认放大倍数, 在图片上滚动鼠标滚轮使用。
+
+// 鼠标经过番号
+function savIDMouseEnter(e) {
+    // 进入番号, 如果之前存在菜单, 就判断是否是现在番号的菜单, 如果是, 退出; 否则删掉菜单, 重新获取
+    if (divTarget && $(e).attr('href') == $(divTarget).attr('href')) {
+        clearTimeout(timerMouseLeaveMenu);
+        // return;
+    } else if (divTarget) {
+        clearTimeout(timerMouseLeaveMenu);
+
+        let odiv = document.querySelector(".sav-menu");
+        if (odiv) {
+            odiv.parentNode.removeChild(odiv);
+        }
+    }
+
+    divTarget = $(e);
+    clearTimeout(timerMouseLeave);
+    clearTimeout(timerGetInfo);
+
+    avmouseenter($(e));
+}
+
+// 鼠标离开番号
+function savIDMouseLeave(e) {
+    timerMouseLeave = setTimeout(function () {
+        avInfo = {};
+        savMenuMouseLeave();
+        removeLoading();
+    }, 50)
+}
+
+
+// 鼠标进入菜单
+function savMenuMouseEnter(e) {
+    clearTimeout(timerMouseLeave);
+}
+
+// 鼠标离开菜单
+function savMenuMouseLeave(e) {
+    timerMouseLeaveMenu = setTimeout(function () {
+        var odiv = document.querySelector(".sav-menu");
+        if (odiv) {
+            if (setting.dontClearMenu) {
+                console.log("移除");
+            } else {
+                // odiv.parentNode.removeChild(odiv);
+                odiv.classList.add("savCloseAnim")
+                setTimeout(function () {
+                    if (odiv) {
+                        odiv.parentNode.removeChild(odiv);
+                    }
+                }, 100)
+            }
+            Imgscall = 1.0;
+            divTarget = null;
+        }
+        avInfo = {};
+        clearTimeout(timerGetInfo);
+    }, 10);
+}
+
+// 鼠标滑过 显示菜单
+function avmouseenter(e) {
+    if (document.querySelector(".sav-menu")) {
+        return; // 防止出现菜单后重复触发, 尤其是margin上移两像素后
+    }
+
+    // 创建搜索基本菜单(搜索按钮)
+    var odiv = createPattenr($(e));
+
+    // 信息加载时的动画
+    addLoading(odiv);
+
+    var oPosition = $(e)[0].getBoundingClientRect();
+    var posRight = 630 - (document.documentElement.clientWidth - oPosition.x);
+    if (posRight < 15) {
+        posRight = 15;
+    }
+    odiv.style.transformOrigin = posRight + "px 5px";
+
+    document.body.appendChild(odiv);
+    odiv.style.left = oPosition.x + "px";
+    odiv.style.top = oPosition.y + oPosition.height - 2 + "px";
+    odiv.style.width = "650px";
+
+    timerGetInfo = setTimeout(() => {
+        getInfo($(e));
+    }, 300);
+
+    var otherInfo = document.createElement('avdivsInfo');
+    otherInfo.innerHTML = addOtherInfo($(e));
+    odiv.appendChild(otherInfo);
+
+    settingPostion();  //重置位置
+}
+
+// 获取番号相关的信息, 添加图片,调用其他函数添加信息
+function getInfo(e, oFirstBrowse) {
+    noReferrer();   // 针对防盗链问题
+    javbusloading();
+
+    // 将获取到的信息进行展示和保存
+    var otherInfo = document.querySelector("avdivsInfo");
+    if (!otherInfo) {
+        otherInfo = document.createElement('avdivsInfo');
+    }
+    otherInfo.innerHTML = addOtherInfo($(e));
+
+    let imgDiv = document.createElement("avdivimg");
+    let image = document.createElement("img");
+    image.src = $(e).attr('href');
+    image.classList.add("avimg");
+    image.setAttribute("referrerpolicy", "no-referrer");
+    imgDiv.appendChild(image);
+    otherInfo.appendChild(imgDiv);
+
+    image.onload = function () {
+        removeLoading();
+        settingPostion();
+    }
+    image.onerror = () => {
+        if (avInfo.imgSrc2) {
+            image.src = avInfo.imgSrc2;
+            localInfo[avID].image = avInfo.imgSrc2;
+            GM_setValue("avInfo2", localInfo);
+        } else {
+            image.classList.add('savImgError');
+            image.src = imgErrorSVG;
+        }
+    }
+    settingPostion();
+
+    // document.querySelector(".sav-menu").appendChild(otherInfo);
+}
+
+// 创建搜索基本菜单(搜索按钮)
+function createPattenr(e, id_wuma) {
+    var odiv = document.createElement("avdiv");
+    odiv.classList.add("sav-menu");
+
+    let aPattern = "<avdivbutton>";
+    aPattern += "<avdiv class='savlink'><a href='" + $(e).attr('href') + "' target='_blank' referrerpolicy='same-origin'>原图</a></avdiv>";
+    aPattern += "</avdivbutton>";
+
+    odiv.addEventListener("mouseenter", savMenuMouseEnter);
+    odiv.addEventListener("mouseleave", savMenuMouseLeave);
+
+    // 鼠标在图片上点击和滚轮放大缩小图片
+    odiv.addEventListener("click", savMenuClick);
+    odiv.addEventListener("wheel", savImgWheel);
+
+    odiv.innerHTML = aPattern;
+
+    return odiv;
+}
+
+// 防盗链
+function noReferrer() {
+    // 相关代码地址 https://greasyfork.org/zh-CN/scripts/376884
+    // 名称: 显示防盗链图片 for Inoreader
+    // 作者: maboloshi
+    var meta = document.createElement('meta');
+    meta.name = "referrer";
+    meta.content = "no-referrer";
+    document.getElementsByTagName('head')[0].appendChild(meta);
+}
+
+function javbusloading() {
+    var stop2 = document.querySelector(".stop2");
+    if (stop2) {
+        stop2.classList.toggle("javbusloading")
+    }
+}
+
+// 滚动图片放大缩小
+function savImgWheel(e) {
+    if (e.target.tagName == "IMG") {
+        if (e.wheelDelta > 0) {
+            e.target.classList.add("imageBig"); // 点击后可以恢复
+            Imgscall += 0.15;
+            e.target.style.transform = "scale(" + Imgscall + ")";
+        } else if (e.wheelDelta < 0) {
+            if (Imgscall > 1) {
+                Imgscall -= 0.15;
+                if (Imgscall < 1) { // 偶尔会继续减小, 明明已经小于1还是会执行到这
+                    Imgscall = 1
+                }
+                e.target.style.transform = "scale(" + Imgscall + ")";
+                if (Imgscall == 1) { // 缩放到1就去掉class, 之前是缩放到1后继续滚动一次才会去掉class
+                    e.target.classList.remove("imageBig");
+                    e.target.style = "";
+                }
+            } else {
+                e.target.classList.remove("imageBig");
+                e.target.style = "";
+            }
+        }
+    }
+    e.preventDefault();
+    return false;
+}
+
+// 点击事件, 图片放大缩小, debug中复制番号
+function savMenuClick(e) {
+    // 测试使用
+    if (e.target.classList.contains("savCopyID")) {
+        GM_setClipboard(e.target.dataset.av)
+    } else if (e.target.classList.contains("savCloseMenu")) {
+        var odiv = document.querySelector(".sav-menu");
+
+        odiv.classList.add("savCloseAnim")
+        setTimeout(function () {
+            odiv.parentNode.removeChild(odiv);
+
+        }, 100)
+
+        Imgscall = 1.0;
+        avInfo = {};
+        divTarget = null;
+        clearTimeout(timerGetInfo);
+        return;
+    } else if (e.target.classList.contains("savSetting")) {
+        savBoxEdit();
+        return;
+    } else if (e.target.classList.contains("jellyfin")) {
+        if (e.target.classList.contains("noJellyfin")) {
+            console.log(e.target.dataset.avid);
+            GM_setClipboard(e.target.dataset.avid);
+        }
+        // console.log(e.target.dataset.url);
+        if (debug) console.log(e.target.dataset.url);
+        GM_openInTab(e.target.dataset.url, {active: true, insert: true, setParent: true});
+        return;
+    } else if (e.target.classList.contains("savsehuatang")) {
+        // 防止多次点击导致重复发送请求
+        e.target.classList.remove("savsehuatang");
+        sehuatang(e.target.dataset.avid);
+        return;
+    } else if (e.target.classList.contains("savVideoClose")) {
+        let videoDiv = document.querySelector("avdivVideo");
+        if (videoDiv) {
+            videoDiv.classList.add("savCloseAnim2");
+            setTimeout(() => {
+                videoDiv.parentNode.removeChild(videoDiv);
+            }, 200)
+        }
+        return;
+    }
+
+
+    // 图片放大缩小
+    if (e.target.tagName == "IMG") {
+        if (e.target.classList.contains("imageBig")) {
+            e.target.classList.remove("imageBig");
+            Imgscall = 1.0
+            e.target.style = "";
+        } else {
+            Imgscall = 1.3  // 重置大小
+            e.target.classList.add("imageBig");
+        }
+    } else {
+        var oImg = document.querySelector(".sav-menu").querySelector("img");
+        if (oImg) {
+            oImg.classList.remove("imageBig");
+            Imgscall = 1.0
+            oImg.style = "";
+        }
+    }
+}
+
+// 添加信息加载时的动画
+function addLoading(odiv) {
+    var savLoading = document.createElement('avdiv');
+    savLoading.classList.add("savLoadingContainer");
+    var savhr = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">' +
+        '<linearGradient xmlns="http://www.w3.org/2000/svg" id="grad4" x1="0%" y1="50%" x2="100%" y2="50%">' +
+        '<stop class="stop1" offset="30%" />' +
+        '<stop class="stop2" offset="50%" />' +
+        '<stop class="stop3" offset="70%" />' +
+        '</linearGradient>' +
+        '<rect xmlns="http://www.w3.org/2000/svg" width="600" height="5" style="fill:url(#grad4)"/> ' +
+        '</svg>'
+    savLoading.innerHTML = '<avdiv class="savLoading">' + savhr + savhr + '</avdiv>';
+    odiv.appendChild(savLoading);
+}
+
+// 在菜单中添加番号相关的信息(标题,演员等)
+function addOtherInfo(avID) {
+    var str = "";
+    str += "<avdiv class='sav-title'>标题: " + "测试ING" + "</avdiv>";
+
+    return str;
+}
+
+// 调整距离底部的距离,以防越界
+function settingPostion(image) {
+    var odiv = document.querySelector(".sav-menu");
+    if (!odiv) return;
+    var oClient = odiv.getBoundingClientRect();
+    var oTop = oClient.top; // 距离顶部举例
+    var oHeight = oClient.height;   //自身高度
+    // var oWidth = oClient.Width;  // 自身宽度
+    var winHeight = document.documentElement.clientHeight;  //可视窗口高度
+    var winWidth = document.documentElement.clientWidth;    //可视窗口宽度
+    let loadingContainerHeight = document.querySelector(".savLoadingContainer") ? 8 : 0;
+    if (oTop + oHeight - loadingContainerHeight > winHeight) { // 越出了屏幕底边
+        odiv.style.position = "fixed";
+        odiv.style.top = winHeight - oHeight + 2 * loadingContainerHeight - 16 + "px";
+        var posBottom = oHeight - (document.documentElement.clientHeight - $(divTarget)[0].getBoundingClientRect().y) + 30;
+        if (posBottom < 5) {
+            posBottom = 5
+        }
+        odiv.style.transformOrigin = odiv.style.transformOrigin.replace(/\s.+px/, ` ${posBottom}px`)
+    }
+    if (oClient.x < 0) {   //左边
+        odiv.style.position = "fixed";
+        odiv.style.left = 0;
+    } else if (winWidth - oClient.x < 600) {  // 越出了屏幕右边
+        odiv.style.position = "fixed";
+        odiv.style.right = "4px";
+        odiv.style.left = "";
+    }
+}
+
+// 鼠标离开菜单
+function savMenuMouseLeave(e) {
+    timerMouseLeaveMenu = setTimeout(function () {
+        var odiv = document.querySelector(".sav-menu");
+        if (odiv) {
+            odiv.classList.add("savCloseAnim");
+            setTimeout(function () {
+                if (odiv) {
+                    odiv.parentNode.removeChild(odiv);
+                }
+            }, 100)
+        }
+        avInfo = {};
+    }, 10);
+}
+
+// 移除信息加载时的动画
+function removeLoading() {
+    // return;
+    var loading = document.querySelector(".savLoadingContainer");
+    if (loading) {
+        loading.style.height = "0px";
+        loading.style.marginTop = "0px";
+        setTimeout(() => {
+            loading.parentNode?.removeChild(loading);
+        }, 200)
+    }
+}

src/main/resources/static/js/my-coin.js

@@ -400,7 +400,7 @@ function mainSearch(url, nameEn, slideDiv, typetype, needCustomFlag) {
 
                     str += '<tr>';
                     $.each(returnEn, function (index, obj) {
-                        var objStyle = dataDetail.hasOwnProperty(obj + 'Style') ? dataDetail[obj + 'Style'] : '';
+                        var objStyle = dataDetail.hasOwnProperty(obj + 'Style') && !$.isNull(dataDetail[obj + 'Style']) ? dataDetail[obj + 'Style'] : '';
                         var objContent = dataDetail.hasOwnProperty(obj) ? dataDetail[obj] : '--';
                         str += '<td' + objStyle + '>' + objContent + '</td>';
                     });
@@ -570,6 +570,15 @@ function initContentEvent(nameEn) {
                 }
             });
         });
+
+        // 鼠标滑过 开启菜单
+        $("tbody.contentTD").find("a").mouseenter(function () {
+            savIDMouseEnter($(this));
+        });
+        // 鼠标离开 关闭菜单
+        $("tbody.contentTD").find("a").mouseleave(function () {
+            savIDMouseLeave($(this));
+        });
     }
 }