Jqueryは画像をクリックして中央に拡大することを実現します
12853 ワード
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script> <style>
.enlargeImg_wrapper {
display: none;
position: fixed;
z-index: 999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: rgba(52, 52, 52, 0.8);
background-size: 50%;
}
img:hover {
cursor: zoom-in;
}
.enlargeImg_wrapper:hover {
cursor: zoom-out;
}
style>
head>
<body>
<img class="enlargeImg" width="80" src="1.jpg" title=" " />
<img class="enlargeImg" width="80" src="2.jpg" title=" " />
<img class="enlargeImg" width="80" src="3.jpg" title=" " />
<script type="text/javascript">
$(function() {
enlargeImg();
})
//
function enlargeImg() {
$(".enlargeImg").click(function() {
$(this).after(" ");
var imgSrc = $(this).attr('src');
$(".enlargeImg_wrapper").css("background-image", "url(" + imgSrc + ")");
$('.enlargeImg_wrapper').fadeIn(200);
})
}
//
function closeImg() {
$('.enlargeImg_wrapper').fadeOut(200).remove();
}
script>
body>
html>