淘宝图片放大镜功能展示

Qys1017

于 2023-10-27 16:59:49 发布

阅读量152

点赞数

文章标签：阿里云图论

本文链接：https://blog.csdn.net/Qys1017/article/details/134080137

版权

淘宝图片放大镜功能已经做好了，左边是淘宝图片，右侧是产品分类信息，需要的老板拿走不谢


<!DOCTYPE html>
<html lang="zn">
 
<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>
    <style>
        .box {
            width: 280px;
            height: 280px;
            border: 1px solid #ccc;
            float: left;  
            position: relative; 
            margin: 10px;
        }
 
        .big {
            width: 600px;
            height: 600px;
            overflow: hidden;
            border: 1px solid #ccc;
            position: absolute; 
            display: none;
            left:300px;
            border-radius: 10px;
        }
  img {
    max-width: 100%; 
    height: auto;
    padding: 10px 0;
} 
        .mask {
            width:100px;
            height: 100px;
            background-color: yellow;
            position: absolute;/*在box类里面定位 层级高于展示图*/
            top: 0px;
            left: 0px;
            opacity: .5;/*设置遮罩层的透明度*/
            cursor: move;/*鼠标经过的时候变成十字拖动样式*/
            display: none;/*默认不显示 鼠标经过box时显示*/
        }
 
        .img1 {
            position: absolute;
            top: 0px;
            left: 0px;
            
        }
        .box{text-align: center;}
        .xinxi {margin:10px;float: left;}
        .xinxi p{margin: 5px 10px;}
        .xinxi div{margin: 5px 10px;background: #333;float: left;padding: 5px 10px;color: #fff;border-radius: 3px}
        .peiyu{width: 1200px;margin: 0 auto;}
        .peiyudatu{position: absolute;}
    </style>
</head>
 
<body>
	<div class="peiyu">
		<div class="box">
        <img src="ip.jpg" alt="" width="auto" height="100%" style="max-width: 100%;">
            <div class="mask"></div>
        </div>
        <div class="xinxi">
    	 	<p>分类:</p>
    	 	<p>供应商：</p>
    	 	<p>规格：</p>
    	 	<p>价格：RMB</p>
    	 	<p>单位：</p>
    	 	<p>供应数量：</p>
    	 	<p>最小起订量：</p>
    	 	<p>用途：</p>
    	 	<p>有效期：</p>
    	 	<a href=""><div>立即询盘</div></a>
    	 	<a href=""><div><i></i> 收藏</div></a>
	   </div>
 	<div class="peiyu peiyudatu" >
		<div class="big">
		    <img src="ip.jpg" alt="" class="img1">
		</div>
    </div>
 </div> <!--结束 -->
    <script>
        var mask = document.querySelector('.mask');
        var box = document.querySelector('.box');
        var big = document.querySelector('.big');
        var img = document.querySelector('.img1');
 
        box.addEventListener('mouseover', function () {
            mask.style.display = 'block';
            big.style.display = 'block';
 
        });
 
        box.addEventListener('mouseout', function () {
            mask.style.display = 'none';
            big.style.display = 'none';
        });
 
        box.addEventListener('mousemove', function (e) {
 
            //得到的x和y是鼠标在盒子内的坐标  this指向box
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
 
          //将获取到的鼠标的值给遮罩层（减去一半是因为让鼠标在遮罩层中央） 让它跟着鼠标移动
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
 
 
            //设置最大移动距离
            var maskWidth = box.offsetWidth - mask.offsetWidth;
            var maskHeight = box.offsetHeight - mask.offsetHeight;
            //控制mask移动的范围
            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= maskWidth) {
                maskX = maskWidth;
            }
 
            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= maskHeight) {
                maskY = maskHeight;
            }
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';
 
             //大图最大移动距离
            var imgWidth = img.offsetWidth - big.offsetWidth;
            var imgHeight = img.offsetHeight - big.offsetHeight;
 
            //大图片的移动距离 = mask移动距离 * 大图最大移动距离 /mask的最大移动距离  
            var bigX = maskX * imgWidth / maskWidth;
            var bigY = maskY * imgHeight / maskHeight;
 
            //赋值
            img.style.left = (-bigX) + 'px';
            img.style.top = (-bigY) + 'px';
 
        });
 
    </script>
 
 
</body>
 
</html>