- 技术
- 原生js——点击图片放大预览
目的：点击图片时发大预览效果
html：
<body id="app">
<div class="row" id="video">
<div class="col-xs-12 col-sm-3 image center-block">
<img src="./images/feedback/01.jpg" alt="" />
</div>
<div class="col-xs-12 col-sm-3 image">
<img src="./images/feedback/02.jpg" alt="" />
</div>
<div class="col-xs-12 col-sm-3 image">
<img src="./images/feedback/03.jpg" alt="" />
</div>
<div class="col-xs-12 col-sm-3 image">
<img src="./images/feedback/04.jpg" alt="" />
</div>
</div>
<div id="canvas" class="canva-image">
</div>
</body>
css:
.preview::before{
content: '';
display: block
;
position: fixed
;
width: 100%
;
height: 100%
;
background-color: rgba(0, 0, 0, 0.5
);
z-index: 10
;
}
.canva-image{
position: fixed
;
top: 15%
;
left: 38%
;
z-index: 12
;
}
.clear{
position: absolute
;
top: 0
;
right: 0
;
cursor: pointer
;
text-shadow: 1px 1px 1px gray
;
}
.clear:active{
transform: translateY(2px
);
}
js:
var img
= document
.createElement("img");
var span
= document
.createElement('span');
var cav
= document
.getElementById('canvas');
var images
= document
.getElementById('video').children
;
var body
= document
.getElementById('app');
span
.className
="glyphicon glyphicon-remove clear";
span
.title
= "关闭图片";
images
= [...images
];
images
.forEach(v
=>{
let vImage
= v
.children
[0];
vImage
.addEventListener('click', (e
) =>{
img
.src
= e
.target
.src
;
cav
.appendChild(img
);
cav
.appendChild(span
);
body
.className
= "preview";
});
});
span
.addEventListener('click', () =>{
cav
.removeChild(img
);
cav
.removeChild(span
);
body
.className
= "";
});
Processed:
0.015, SQL:
9
