您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
电脑端可以跟随鼠标悬停图片放大预览 2021/5/16上午12:56:31
当前为
// ==UserScript== // @name 鼠标悬停图片放大预览-大师兄 // @namespace 大师兄Scripts // @match *://*/* // @grant none // @version 2.1 // @author 大师兄 [email protected] // @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 // ==/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 && img_height < img_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, }); } } };