js相册页面可实现放大镜预览吗

2024年 5月 19日上午7:16 • 激活谷笔记

当我们浏览淘宝或者京东网站的时候，当你用鼠标移动到产品详细页上面的图片时，图片上会显示小的方框，在图片的右边则显示出更大的图片方便浏览者可以看到更详细的产品细节。本文章我们就模拟下淘宝、京东产品放大镜效果。

<!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: 450px;
            height: 450px;
            border: 1px solid #ccc;
            float: left; /*设置浮动使得两个盒子在一排显示*/
            position: relative;/*设置定位 根据自身情况可以改为绝对定位 */
            margin: 10px;
        }
        .big {
            width: 600px;
            height: 600px;
            overflow: hidden;/*超出部分隐藏*/
            border: 1px solid #ccc;
            position: relative; /*设置定位 根据自身情况可以改为绝对定位 */
            display: none;/*默认不显示 鼠标经过box时显示*/
        }
        .mask {
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: absolute;/*在box类里面定位 层级高于展示图*/
            top: 0px;
            left: 0px;
            opacity: .5;/*设置遮罩层的透明度*/
            cursor: move;/*鼠标经过的时候变成十字拖动样式*/
            display: none;/*默认不显示 鼠标经过box时显示*/
        }
        .img {
            position: absolute;/*在big盒子里面绝对定位*/
			
            /*JavaScript需要赋值需要设置top和left值*/
            top: 0px;
            left: 0px;          
        }
		#smallpic{
			width: 450px;
            height: 450px;
		}
    </style>
</head>
<body>
    <div class="box">
        <img id='smallpic' src="http://www.toutiao.com/a7104928190246060583/small.jpg" alt="">
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="http://www.toutiao.com/a7104928190246060583/big.jpeg" alt="" class="img">
    </div>
    <script>
        var mask = document.querySelector('.mask');
        var box = document.querySelector('.box');
        var big = document.querySelector('.big');
        var img = document.querySelector('.img');
        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>

效果图

js相册页面可实现放大镜预览吗

相关推荐