如何实现在展示商品时，放大商品细节

Posted 2021-01-20

思路：
关于布局
1.有一个展示商品的总的盒子，ID名为show。
2在展示商品的大盒子里，首先要有一个放商品图的盒子，ID名为MiddleBox，里面放商品图
3.之后在展示商品的大盒子里，在MiddleBox盒子右面有一块展示区域，ID名为BigBox，用来存放放大商品后的图片
4.要有一个放大镜的div，ID名为zoom，在MiddleBox上移动
关于样式：
1.大盒子show给个定位relative
2.middleBox、BigBox、zoom相对于大盒子定位，即position：absolute；
CSS详情见以下代码：

    body{
                padding: 0;
                margin: 0;
            }
            img{
                display: block;
                border: none;
            }
            #show{
                position: relative;
                width: 250px;
                height: 300px;
                border: 1px solid #ccc;
            }
            #middle{
                position: absolute;
                width:250px;
                height: 300px;
                border:1px solid #ccc;
            }
            #middle img{
                width:250px;
                height: 300px;
            }
            #zoom{
                position: absolute;
                width:100px;
                height: 100px;
                background: #00FFFF;
                cursor: move;
                opacity: 0.5;
                display: none;
            }

            #big{
                position: absolute;
                width: 250px;
                height: 300px;
                border: 1px solid #ccc;
                overflow: hidden;
                left: 250px;
                display: none;
                top: -1px;
            }
            #big img{
                position: absolute;
                width: 625px;
                height: 900px;

            }

关于JS：
1.让放大镜的div（zoom）跟随鼠标在MiddleBox上移动
2.让大图片的位置随着zoom的位置改变而改变。
3.对于放大镜（zoom）的尺寸除以MiddleBox的尺寸应当等于BigBox盒子的尺寸除以BigBox盒子里放的大图片的尺寸
4.BigBox里面的大图片移动的距离应等于放大镜（zoom）的移动的距离除以MiddleBox的尺寸，再乘以 大图片的尺寸
JS详情见以下代码：

            var oMiddle=document.getElementById("middle");
            var oShow=document.getElementById("show");
            var oBig=document.getElementById("big");
            var oZoom=document.getElementById("zoom");
            var oImg=oBig.children[0];

            oMiddle.onmouseover=function(){
                oZoom.style.display="block";
                oBig.style.display="block";

            }
            oMiddle.onmouseout=function(){
                oZoom.style.display="none";
                oBig.style.display="none";
            }

            oMiddle.onmousemove=function(e){
                var evt=e||event;
                var x=evt.clientX-oMiddle.offsetLeft-oShow.offsetLeft;
                var y=evt.clientY-oMiddle.offsetTop-oShow.offsetTop;
                var _left=x-oZoom.offsetWidth/2;
                var _top= y-oZoom.offsetHeight/2;
                var cw=oMiddle.clientWidth;
                var ch=oMiddle.clientHeight;
                var zw=oZoom.offsetWidth;
                var zh=oZoom.offsetHeight;

                if(_left<=0){
                    _left=0;
                }
                if(_top<=0){
                    _top=0;
                }
                if(_left>=cw-zw){
                    _left=cw-zw;
                }
                if(_top>=ch-zh){
                    _top=ch-zh;
                }                               
                oZoom.style.left=_left+"px";
                oZoom.style.top=_top+"px"；

                oImg.style.left=-_left/oMiddle.offsetWidth*oImg.offsetWidth+"px";
                oImg.style.top=-_top/oMiddle.offsetHeight*oImg.offsetHeight+"px";

            }