基于jquery实现放大镜效果

各大商城详细页面产品图片特效展示，鼠标滑过小图显示中图，鼠标滑过中图显示大图展示，jquery放大镜效果图片类似图片放大镜展示，提高用户体验设计，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（）; }）;

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