// ==UserScript==
// @name 鼠标悬停图片放大预览
// @namespace 大师兄Scripts
// @match *://*/*
// @grant none
// @version 1.0
// @author 大师兄
// @description 找了很多图片放大的脚本,都没有一个能用的,只有自己写。脚本还不够完美,但大部分网站的图片都可以已支持悬浮放大了。
// @require https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// @icon http://ww1.sinaimg.cn/large/75314ac9ly1gsoywgjgl3j205k05kaab.jpg
// @downloadURL none
// ==/UserScript==
window.onload = function () {
console.log("图片放大");
// $("*").on("mousedown",function (e) {
// if (3 == e.which) {
// console.log($(e.target)[0].tagName);
// }
// });
// console.log(document.querySelectorAll("body"));
fangdatupian();
function fangdatupian() {
$("body")
.on("mouseenter", "img:not(#dashixiong_preview)", function (e) {
let img_src = $(this).attr("src");
// console.log($(this));
$("body:eq(0)").append(
"
"
); //弹出一个div里面放着图片
//鼠标离开这个div移除
$(this)
.stop(true, false)
.mouseleave(function (e) {
$("#dashixiong_preview").remove();
});
// 鼠标按下时给div挂事件
$(this).mousemove(function (e) {
tupianweizhi(e);
});
//鼠标进到图片里就先执行图片位置
tupianweizhi(e);
})
.on("mouseleave", "img:not(#dashixiong_preview)", function () {
//鼠标离开这个div移除
$(this)
.stop(true, false)
.mouseleave(function (e) {
$("#dashixiong_preview").remove();
});
});
}
function tupianweizhi(e) {
let img_height = $("#dashixiong_preview img").height();
let img_width = $("#dashixiong_preview img").width();
let window_height = $(window).height();
let window_width = $(document).width();
if (
//高度超过屏幕
img_height + e.clientY > window_height &&
img_width + e.clientX < window_width
) {
if((e.clientY - img_height - 20)<0){
$("#dashixiong_preview").css({
top: e.clientY - img_height - 20,
left: e.clientX + 20,
});
}
} else if (
//宽度超过屏幕
img_width + e.clientX > window_width &&
img_height + e.clientY < window_height
) {
$("#dashixiong_preview").css({
top: e.clientY + 20,
left: e.clientX - img_width - 20,
});
} else if (
//高度和宽度超过屏幕
img_width + e.clientX > window_width &&
img_height + e.clientY > window_height
) {
$("#dashixiong_preview").css({
top: e.clientY - img_height - 20,
left: e.clientX - img_width - 20,
});
} else {
$("#dashixiong_preview").css({
top: e.clientY + 20,
left: e.clientX + 20,
});
}
}
};