Greasy Fork is available in English.
2021/5/16上午12:56:31
当前为
// ==UserScript==
// @name 鼠标悬停图片放大预览-大师兄
// @namespace 大师兄Scripts
// @match *://*/*
// @grant none
// @version 2.0
// @author 大师兄
// @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) {
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,
});
}
}
};