图片的遮罩，缩放，移动

蛸-

已于 2022-02-22 08:24:22 修改

阅读量471

点赞数 1

分类专栏：记录文章标签： css3 css html

于 2022-02-21 18:12:55 首次发布

本文链接：https://blog.csdn.net/qq_45768703/article/details/123052801

版权

整合了两个大佬的
一个是原生js: github.com
一个是zoom.js

有待修改—ing

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script src="js/zoomdom.js"></script>
		<style type="text/css">
			*{
     margin: 0;padding: 0;}
			.boximg{
     display: -webkit-box;display: -ms-flexbox;display: flex;width: 40%;margin: auto;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);}
			.mask{
     position: fixed;z-index: 9998;background-color: rgba(0, 0, 0, 0.5);z-index: 9999;transition: all .23s;-webkit-transition: all .23s;display: none;}
			.mask .bigimg{
     z-index: 9999;height:auto; box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;position: relative;}
			.smallimg,.bigimg img{
     width: 100%;vertical-align: middle;}
			.smallimg:hover{
     cursor: zoom-in;}
			.bigimg img{
     z-index: 10000;}
			.bigimg img:hover{
     cursor: move;}
			.mask:hover{
     cursor: zoom-out;}
		</style>
	</head>
	<body>
		<div title="默认图片" class="boximg" style="z-index: 10;">
			<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg2%2FM00%2F00%2F0B%2FChMlWl6yKqyILFoCACn-5rom2uIAAO4DgEODxAAKf7-298.jpg&refer=http%3A%2F%2Fdesk-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647832869&t=94e4cec850eef46474c2c4d40faeb43f" draggable="false" class="smallimg">
		</div>
		
		<div title="缩放图片" class="mask">
			<div class="bigimg">
				<img src="" >
			</div>
		</div>
		
		<div id="" style="width: 100%;height: 1340px;display: block;background-color: #FFC0CB;position: relative;">
			<div id="" style="position: absolute;bottom: 5%;left: 50%;transform: translateX(-50%);">
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fimages01%2F20210215%2Fcbbbdd6f31bd4297810e0f18022781d5.jpeg&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648022301&t=fd62ab698369d1b04b42430a9a0fbef6" class="smallimg">
			</div>
		</div