图片点击放大，再点恢复原状

【一】

1. js代码部分放于页脚HTML代码

<script type="text/javascript">
var contextPath = "${request.contextPath}";
$(document).ready(function() {
//图片放大
$("#outerdiv").hide();
$(function(){
$("img").mouseover(function(){
$(this).css("cursor","pointer");
});

$("img").click(function(){
var _this = $(this);//将当前的pimg元素作为_this传入函数
imgShow("#outerdiv", "#bigimg", _this);
});
});

function imgShow(outerdiv, bigimg, _this){
var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
$('#outerdiv').attr('display','block');
$(bigimg).attr("src", src);//设置#bigimg元素的src属性
$(outerdiv).fadeIn("fast");

$(outerdiv).click(function(){//再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
}
});

</script>

2. html代码部分也放于页脚HTML代码
<div id="outerdiv" style="text-align: center;position: fixed;z-index: 1000;top: 0;left: 0; width: 100%;height: 100%;background-color: rgba(255,255,255,.9);">

<img id="bigimg" style="height: auto;width: 46.6325%;border: 0; margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" />

</div>

说明：用于查看图片，查看用户图片或物品图片详情及审核图片等

 

【二】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>测试dome</title> 
<style>
#modal {
    display: none;
}
.modal {
    margin: auto;
    padding-top: 18%;
    width: 50%;
    height: 80%;
    z-index: 1;
}
.modal img {
    animation-name: zoom;
    animation-duration: 0.6s;
    display: block;
    padding: 10px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 2px 6px rgb(0, 0, 0, 0), 0 10px 20px rgb(0, 0, 0, 0);
    border-radius: 12px;
    border: 1px solid white;
}
@keyframes zoom {
    from {transform: scale(0.1)}
    to {transform: scale(1)}
}
.thum-img {
    float: left;
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    padding: 40px;
}
</style>
    </head>
<body>
<!-- 先来实现弹窗 -->
<div style='position:fixed;width:80%;height:80%;background-color:rgb(0,0,0,0)' id='modal'>
    <div class='modal' id='modalw'>
        <img id='bgImg' />
    </div>
</div>
 
 
<!-- 下面则是主页内容，先只给几个图片 -->
 
<div>
     <img class='thum-img' src='http://p1.so.qhimgs1.com/bdr/594__/t0122d25a4955155da1.jpg' onclick='showBgImg(this)'/> 
    <img class='thum-img' src='http://p0.so.qhimgs1.com/bdr/864__/t0195c425d4062ecbf0.jpg' onclick='showBgImg(this)'/>
    <img class='thum-img' src='http://p2.so.qhimgs1.com/bdr/675__/t01dcb0fdb0bd6f477e.jpg' onclick='showBgImg(this)'/>
    <img class='thum-img' src='http://img1c.xgo-img.com.cn/pics/1594/1593863.jpg' onclick='showBgImg(this)'/>
</div>
 
<script>
    var modal = document.getElementById('modal');
    var modalw= document.getElementById('modalw');
    var bgImg = document.getElementById('bgImg');
 
 
    function showBgImg(e) {
        modal.style.display = 'block';
        modalw.style.display = 'block';
        bgImg.src = e.src;
    }
 
    bgImg.onclick = function() {
        modalw.style.display = 'none';
        modal.style.display = 'none';
    }
</script>
</body>
</html>

 

posted @ 2021-04-30 09:01  十五的星星啊  阅读(409)  评论(0)    收藏  举报