仿微信朋友圈图片预览(移动端)(原创)
<!DOCTYPE html>
<html lang="en">
<!-- 作者：panking -->
<!-- 制作日期：2022/11/23 - 2022/11/24 -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿微信朋友圈图片预览</title>
<link rel="stylesheet" href="https://www.jq22.com/demo/pan_ImgShow202211302307/imgShow.css">
</head>
<body>
<h1 style="position: fixed;top: 10px;left: 10px;color: aliceblue;z-index: 99">注意，请在移动端预览，PC端无效果</h1>
<div class="img_show_box">
<div class="img_show_content">
<div class="img_show_list"></div>
</div>
<div class="img_show_pointer"></div>
</div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/demo/pan_ImgShow202211302307/pinchzoom.min.js"></script>
<script src="https://www.jq22.com/demo/pan_ImgShow202211302307/imgShow.js"></script>
<script>
let imgArr = [
'https://www.jq22.com/demo/pan_ImgShow202211302307/img/img1.png',
'https://www.jq22.com/demo/pan_ImgShow202211302307/img/img2.png',
'https://www.jq22.com/demo/pan_ImgShow202211302307/img/img3.png'
];
imgShow(imgArr);
</script>
</html>
页:
[1]