思路：
關於佈局
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";

            }