<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</head>
<body>
<img src="1.jpg">
<div class="window">
<div class="cloes-tag"></div>
<img src="1.jpg">
</div>
<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>
</html>
图片点击在原图呈上放大的效果
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Programmer_FuQiang/article/details/84223415
猜你喜欢
转载自blog.csdn.net/Programmer_FuQiang/article/details/84223415
今日推荐
周排行