少废话先看东西
开源是程序员的基本美德
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>看大图</title>
</head>
<body>
<div style="text-align: center;">
<img src="https://www.yangshaofeng.com/Upload/Ueditor/Image/20180822/6367056239157893525787598.jpg"
style="width: 20px;" onmouseover="showbig(this,'倩女幽魂')"/>
<img src="https://www.yangshaofeng.com/Upload/Ueditor/Image/20180822/6367056220810169583908632.jpg"
style="width: 20px;" onmouseover="showbig(this,'倩女幽魂')"/>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
var showbig = function (a, title) {
var e = $(a);
var trigger = "hover";
var place = "bottom";
var image = e.attr("src");
if (image == "" || image == null || image == undefined) {
return;
}
var x = 0;
var y = 0;
var w = 300;
var h = 300;
var html = "";
var detail = "";
if (image != null) {
detail = detail + '<img src="' + image + '" style="max-width:' + w + 'px;height:' + h + 'px;" />'
}
if (title != null && title != "") {
if (detail != null && detail != "") {
detail = '<p style="padding:0px 0px 10px 0px;margin:0px;"><strong>' + title + "</strong></p>" + detail
}
e.attr("title", "")
}
detail = '<div style="width: '+w+'px">' + detail + "</div>";
html = $(detail);
$("body").append(html);
if (place == "" || place == null) {
place = "top";
}
if (place == "left") {
x = e.offset().left - html.outerWidth() - 5;
y = e.offset().top - html.outerHeight() / 2 + e.outerHeight() / 2;
} else {
if (place == "top") {
x = e.offset().left - html.outerWidth() / 2 + e.outerWidth() / 2;
y = e.offset().top - html.outerHeight() - 5;
} else {
if (place == "right") {
x = e.offset().left + e.outerWidth() + 5;
y = e.offset().top - html.outerHeight() / 2 + e.outerHeight() / 2;
} else {
if (place == "bottom") {
x = e.offset().left - html.outerWidth() / 2 + e.outerWidth() / 2;
y = e.offset().top + e.outerHeight() + 5;
console.log(x + ":" + y);
}
}
}
}
html.css({
"left": x + "px",
"top": y + "px",
"position": "fixed",
"background": "#fff",
"padding": "10px",
"text-align": "center",
"box-sizing": "content-box",
"box-shadow": "0px 3px 20px #f1f1f1"
});
if (trigger == "hover" || trigger == "click" || trigger == null) {
e.mouseout(function () {
html.remove();
e.attr("title", title)
})
}
}
</script>
</body>
</html>
川公网安备 51010702003150号
留下您的脚步
最近评论