Jquery实现图片点击后居中放大

<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>

你可能感兴趣的:(Jquery)