思路：

关于布局1.有一个展示商品的总的盒子，ID名为show。2在展示商品的大盒子里，首先要有一个放商品图的盒子，ID名为MiddleBox，里面放商品图3.之后在展示商品的大盒子里，在MiddleBox盒子右面有一块展示区域，ID名为BigBox，用来存放放大商品后的图片4.要有一个放大镜的div，ID名为zoom，在MiddleBox上移动关于样式：1.大盒子show给个定位relative2.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";            }