基于jquery实现放大镜效果

 <div class="goods-imginfo-bimg-box" style="background-image: url(http://www.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: %;top:;margin-left: px;border:px solid #ccc;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();  }  xtop=e.pageY-picBox.offset().top-msBox.height()/;  if(xtop<){  xtop=;  }else if(xtop>picBox.height()-msBox.height()){  xtop=picBox.height()-msBox.height();  }  msBox.css({'left': xleft+'px','top': xtop+'px'});  mBox.css({'backgroundPosition':-bs*xleft+'px '+-bs*xtop+'px'}); }); picBox.mouseout(function(){  msBox.hide();  mBox.hide(); });