模仿淘宝商品查看的放大镜效果

最新推荐文章于 2023-09-03 13:44:07 发布

czc_104

最新推荐文章于 2023-09-03 13:44:07 发布

阅读量105

点赞数

本文链接：https://blog.csdn.net/qq_42938982/article/details/103282928

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>淘宝放大镜效果</title>

        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }

            .box{
                margin: 100px;
                width: 350px;
                height: 350px;
                position: relative;
                border: solid 1px gray;
            }

            .cover{
                width: 150px;
                height: 150px;
                opacity: 0.3;
                background-color: yellow;
                position: absolute;
                top: 0;
                left: 0;
                display: none;
            }

            .big{
                position: absolute;
                top: 0;
                left: 360px;
                display: none;
                overflow: hidden;
                height: 400px;
                width: 400px;
            }
            .box img{
                width: 350px;
                position: absolute;
            }
            .big img{
                position: absolute;
                width: 600px;
            }
        </style>
    </head>
    <body>
        <!-- 一个大盒子，用以控制位置 -->
        <div  class="box">
            <!-- 小图片盒子 -->
            <div class="small">
                <img src="./img/1.png">
                <!-- 遮盖层 -->
                <div class="cover"></div>
            </div>
            <!-- 大图片 -->
            <div class="big">
                <img src="./img/1.png">
            </div>
        </div>

        <script type="text/javascript">
            // 1.获取需要操作的元素
            var box=document.querySelector('.box');
            // var small=document.querySelector('.small');
            var bigBox=document.querySelector('.big');
            var cover=document.querySelector('.cover');
            var bigImage=document.querySelector(".big>img");
            //2.鼠标移动进入小盒子,遮盖层和大图片出现
            box.onmouseenter=function(){
                cover.style.display="block";
                bigBox.style.display="block";
            };
            //3.鼠标离开小盒子,遮盖层和大图片隐藏
            box.onmouseleave=function(){
                cover.style.display="none";
                bigBox.style.display="none";
            };

            //4.鼠标移动,遮盖层跟着移动,并且鼠标点位于遮盖层的中心位置
            box.onmousemove=function(e){
                e = e || window.event;
                //实现思路:鼠标在盒子中的位置=鼠标在文档中位置-盒子位置
                var X= e.clientX ;
                var Y= e.clientY ;
                //鼠标在盒子中的位置,就是遮盖层的位置
                var x=X-box.offsetLeft;
                var y=Y-box.offsetTop;
                //让鼠标位于遮盖层的中央
                var coverX=x - (cover.offsetWidth)/2 ;
                var coverY=y - (cover.offsetHeight)/2;
                //遮盖层不能超过小盒子范围
                if (coverX < 0){
                    coverX = 0;
                }else {
                    coverX = coverX;
                }
                if (coverY < 0){
                    coverY = 0;
                }else {
                    coverY = coverY;
                }
                if (coverX > ( box.offsetWidth - cover.offsetWidth)){
                    coverX =  box.offsetWidth - cover.offsetWidth;
                }else{
                    coverX = coverX;
                }
                if(coverY > ( box.offsetHeight - cover.offsetHeight)){
                    coverY = box.offsetHeight - cover.offsetHeight;
                }else {
                    coverY = coverY;
                }
                cover.style.top=coverY + 'px';
                cover.style.left=coverX + 'px';
                //当遮盖层移动的时候,大图片跟着遮盖层移动(比例关系换算问题)
                //公式：遮盖层移动距离/遮盖层最大移动距离=大图片移动距离/大图片最大移动距离
                //故:大图片移动距离=遮盖层移动距离/遮盖层最大移动距离*大图片最大移动距离

                //遮盖层最大距离
                var coverMax=box.offsetWidth-cover.offsetWidth;
                //大图片最大移动距离
                var bigImageMax=bigImage.offsetWidth-bigBox.offsetWidth;

                var bigImageX=coverX*bigImageMax/coverMax;
                var bigImageY=coverY*bigImageMax/coverMax;

                bigImage.style.top=-bigImageY+'px';
                bigImage.style.left=-bigImageX+'px';
            }
        </script>
    </body>
</html>