js编写一个简单的产品放大效果代码

//首先或许要操作的元素
 function getId(tag){　　　　　//定义一个用id获取元素的方法，减少很多工作量！
  return document.getElementById(tag)
 }
 var box=getId("box");
 var small=getId("small");
 var mask=getId("mask");
 var big=getId("big");
 var pic=big.children[0];　　　　　//这里是通过节点的方法获取元素

//鼠标移动到图片上出现两个效果
 small.Onmouseover=function(){
  mask.style.display="block";
  big.style.display="block";
 }
 small.Onmouseout=function(){
  mask.style.display="none";
  big.style.display="none"
 }

//设置小图的焦点框，跟随鼠标；
 small.Onmousemove=function(e){
  var marginL=box.offsetLeft;　//使用offsetLeft方法获得box的margin-left
  var marginT=box.offsetTop;　//使用offsetTop方法获得box的margin-top
  var currentX= e.clientX;　　　　　　　　　　　　　　　　
  var currentY= e.clientY;　　//使用e.clientX和e.clinetY相对于浏览器的左上角的位置　　　　　
  var x=currentX-marginL-mask.offsetWidth/2;　　　　　　　　
  var y=currentY-marginT-mask.offsetHeight/2;　//要想使焦点框的中心对齐鼠标，还需要减去焦点框的宽高的一半
/----------------------此处一会儿还要插入其他代码/---------------------------/
  mask.style.left=x+"px";
  mask.style.top=y+"px"; 　　//改变焦点框的位置　

//设置小图的焦点框，跟随鼠标；
 small.Onmousemove=function(e){
  var marginL=box.offsetLeft;
  var marginT=box.offsetTop;
  var currentX= e.clientX;
  var currentY= e.clientY;
  var x=currentX-marginL-mask.offsetWidth/2;
  var y=currentY-marginT-mask.offsetHeight/2;

  //给焦点框设置移动区域
  if(x<0){x=0;}
  if(x>small.offsetWidth-mask.offsetWidth)
　　　　　　{x=small.offsetWidth-mask.offsetWidth};　　　　　//　用于定位的x的最小值是0，最大值是small的长度-mask的长度 y轴线同理
  if(y<0){y=0;}
  if(y>small.offsetHeight-mask.offsetHeight)
　　　　　　　　{y=small.offsetHeight-mask.offsetHeight};
  mask.style.left=x+"px";　　　　　　　　　　//注意在规定移动区域后再写mask的移动区域，注意代码的执行顺序
  mask.style.top=y+"px";

//设置大盒子中显示的内容
  var relativeX=mask.offsetLeft;
  var relativeY=mask.offsetTop;
  var proporatiOnX=pic.offsetWidth/small.offsetWidth;　　　　　　//设置比例
  var proporatiOnY=pic.offsetHeight/small.offsetWidth;
  pic.style.marginLeft=-relativeX*proporationX+"px";　　　　　　//注意！margin的值必须是负值，“px不要丢掉
  pic.style.marginTop=-relativeY*proporationY+"px";