基于jquery实现放大镜效果

各大商城详细页面产品图片特效展示，鼠标滑过小图显示中图，鼠标滑过中图显示大图展示，jquery放大镜效果图片类似图片放大镜展示，提高用户体验设计，jquery 图片放大镜效果是典型的一款图片特效展示。

效果图如下：

图片大框初始样式：

添加放大区域框和放大效果框

picBox=$('.goods-imginfo-bimg-box');
picBox.css('position','relative');
picBox.append('');
picBox.append('');

添加样式表

$("head").append('');

样式

@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
 
 $("head").append('');
 picBox=$('.goods-imginfo-bimg-box');
 picBox.css('position','relative');
 picBox.append('');
 picBox.append('');
 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();
 });

以上代码就是基于jquery实现放大镜效果，希望大家喜欢。