js 点击图片出来放大弹窗，再次点击还原

来源：互联网发布：中国中车株洲所知乎编辑：程序博客网时间：2024/05/18 01:13

<html>
<head>
<meta charset="gbk">

<style>
*{
padding: 0px;
margin: 0px;
}

.cloes-tag {
position: absolute;
right: 20px;
top: 20px;
width: 20px;
height: 20px;
border: none;
cursor: pointer;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.cloes-tag:before,
.cloes-tag:after {
content: '';
position: absolute;
background-color: #a9a9a9;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
.cloes-tag:before {
left: 45%;
top: -10%;
width: 10%;
height: 120%;
}
.cloes-tag:after {
top: 45%;
left: -10%;
width: 120%;
height: 10%;
}

img{
width: 20%;
height: auto;
cursor: pointer;
}

.window{
position: fixed;
width: 75%;
height: 75%;
left: 50%;
top: 50%;
visibility: hidden;
opacity: 0;
background-color: white;

-webkit-transition: all 0.6s;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.6);
}

.window img{
width: 50%;
}

.window-show{
visibility: visible;
opacity: 1;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
text-align: center;
}

</style>

<body>
<img src="meinv.png">

<div class="window">
<div class="cloes-tag"></div>
<img src="meinv.png">
</div>
</body>

<script>

var $ = function( obj ){
return document.querySelector( obj );
}

$('img').addEventListener('click', function(){
$('.window').classList.add('window-show');
}, false)

$('.cloes-tag').addEventListener('click', function(){
$('.window').classList.remove('window-show');
}, false)

</script>

如果有多张图片，可以这样写。

<body>
<img src="meinv.png">

<div class="window">
<div class="cloes-tag"></div>
<img>
</div>
</body>

<script>

var $ = function( obj ){
return document.querySelector( obj );
}

var initWindowWithIMGAndShow = function( src ){
$('.window img').src = src;
$('.window').classList.add('window-show');
}

$('img').addEventListener('click', function(){
var src = this.src;
initWindowWithIMGAndShow( src );
}, false)

$('.cloes-tag').addEventListener('click', function(){
$('.window').classList.remove('window-show');
}, false)

</script>
</body>
</html>

阅读全文

0 0