html+js 点击图片放大、点击图片全屏
孔厉刚
html 点击图片放大，图片全屏，再点击关闭全屏，我这里直接整理成一个js，使用方便。
使用步骤：
1、引用 jq
2、引用 imgEnlarge.js。
3、没了。
直接上代码，这个是测试代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/imgEnlarge.js"></script>
</head>
<body>
<img src="http://img2.3png.com/f2635dd311d3c96633ea4a7e2adeaf3cedbd.png" alt="" style="width: 50px;">
</body>
</html>
这个是imgEnlarge.js
// 依赖jq 默认点击<img>标签就会放大，可根据自己情况修改
$(document).ready(function () {
$("body").append("<!--放大图片-->\n" +
"<div class=\"blackScreen\" style=\"display: none;display:none; position:fixed; top:0; right:0; bottom:0; left:0; background-color:#000000; z-index:1000;\">\n" +
" <span class=\"fullScreenImg\" style='position:absolute; top:0; right:0; bottom:60px; left:0; background:center center no-repeat; background-size:contain;'></span>\n" +
"</div>");
});
$(function () {
// 放大图片
$('img').on('click', function () {
// console.log("放大");
if (this.getAttribute("src") != "url(\"null\") 0% 0% / 100% no-repeat") {
$(".fullScreenImg").css("background-image", "url(\"" + this.getAttribute("src") + "\")");
$(".blackScreen").fadeIn(100);
}
});
// 关闭放大图片
$(".blackScreen").on("click", function () {
// console.log("关闭");
$(".blackScreen").fadeOut(100);
});
});
代码写的丑，凑合看吧，又不是不能用。
如果有什么问题，欢迎大佬指正，最后如果对你有一点点帮助，麻烦支持一下。
全国寄快递4元起，电影票8.8折。更多优惠关注公众号：【折价寄件】
感谢观看！！！！
类似资料：