基于jquery实现放大镜效果

 <div class="goods-imginfo-bimg-box" style="background-image: url(http://.od.my/images/201507/thumb_img/142_thumb_P_1435792664520.jpg); position: relative;"></div>

picBox=$('.goods-imginfo-bimg-box');
picBox.css('position','relative');
picBox.append('<div class="mag-sbox"></div>');
picBox.append('<div class="mag-box"></div>');

$("head").append('<link rel="stylesheet" type="text/css" href="themes/od/css/mag.css">');

@CHARSET "UTF-";
 .mag-sbox{position: absolute;border: px solid #fff;background-color: rgba(,,,.);cursor: crosshair;z-index: ;display: none;}
 .mag-box{position: absolute;left: %;:;margin-left: px;border:px solid #c;width: %;height:%;
 background-size: cover;background-color: #fff;z-index: ;display: none;
 }
js
 /
  放大镜效果 
  不改变前面的代码
  添加放大镜效果
  给 goods-imginfo-bimg-box；
  /
 $("head").append('<link rel="stylesheet" type="text/css" href="themes/od/css/mag.css">');
 picBox=$('.goods-imginfo-bimg-box');
 picBox.css('position','relative');
 picBox.append('<div class="mag-sbox"></div>');
 picBox.append('<div class="mag-box"></div>');
 msBox=$('.mag-sbox');
 mBox=$('.mag-box');
 bs=; //倍数
 msBox.css({width:picBox.width()/+'px',height:picBox.height()/+'px'});
 mBox.css({'backgroundSize':bs+'%'});
 picBox.mousemove(function(e){
  mBox.css('backgroundImage',$(this).css('backgroundImage')); //给大图背景
  if(msBox.css('display')!='block'){ //鼠标放上去，出现范围框和效果框
  msBox.show();
  }
  if(mBox.css('display')!='block'){
  mBox.show();
  }
  / 鼠标移动 /
  xleft=e.pageX-picBox.offset().left-msBox.width()/;
  if(xleft<){
  xleft=;
  }else if(xleft>picBox.width()-msBox.width()){
  xleft=picBox.width()-msBox.width();
  }
  x=e.pageY-picBox.offset().-msBox.height()/;
  if(x<){
  x=;
  }else if(x>picBox.height()-msBox.height()){
  x=picBox.height()-msBox.height();
  }
  msBox.css({'left': xleft+'px','': x+'px'});
  mBox.css({'backgroundPosition':-bsxleft+'px '+-bsx+'px'});
 });
 picBox.mouseout(function(){
  msBox.hide();
  mBox.hide();
 });