直播短视频源码，动态需要用到点击图片展示预览效果的功能，具体实现此功能的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片点击效果</title>
<style>
.imgViewDom {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 99999999;
background: rgba(255, 255, 255, 0.8);
overflow: auto;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.clickimg img {
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
.imgViewDom img {
cursor: zoom-out;
}
</style>
</head>
<body>
<div class="clickimg">
<img alt="" height="642" src="https://ucc.alicdn.com/images/user-upload-01/20200730113910621.png" width="998">
<img alt="" height="638" src="https://ucc.alicdn.com/images/user-upload-01/20200730113910632.png" width="1025">
</div>
<div class="imgViewDom"><img src="" alt=""></div>
</body>
</html>
<script src="./js/jquery-2.2.3.min.js"></script>
<script>
$(function(){
$(".clickimg img").click(function(){
var imgs = this;
var imgSrc=$(imgs).attr("src");
//var imgStr='<img src="'+imgSrc+'">';
$(".imgViewDom img").attr("src",imgSrc);
$(".imgViewDom").css("display","-webkit-box");
});
$(".imgViewDom").click(function(){
var box = this;
$(box).find("img").attr("src","");
$(box).hide();
});
})
</script>
以上就是关于直播短视频源码中点击图片展示预览效果的相关代码，更多内容欢迎关注之后的文章
