JQuery放大镜效果

修改网站前端，需要放大镜效果，试着写了个

效果如下：

图片大框初始样式：

 1 <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> 

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

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

添加样式表

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

样式

1 @CHARSET "UTF-8";
2 .mag-sbox{position: absolute;border: 1px solid #fff;background-color: rgba(255,255,255,0.5);cursor: crosshair;z-index: 9;display: none;}
3 .mag-box{position: absolute;left: 100%;top:0;margin-left: 20px;border:1px solid #c8c8c8;width: 100%;height:100%;
4     background-size: cover;background-color: #fff;z-index: 9;display: none;
5 }

js

 1 /*
 2      *  放大镜效果 
 3      *  不改变前面的代码
 4      *  添加放大镜效果
 5      *  给 goods-imginfo-bimg-box；
 6      * */
 7     $("head").append(\'<link rel="stylesheet" type="text/css" href="themes/od/css/mag.css">\');
 8     picBox=$(\'.goods-imginfo-bimg-box\');
 9     picBox.css(\'position\',\'relative\');
10     picBox.append(\'<div class="mag-sbox"></div>\');
11     picBox.append(\'<div class="mag-box"></div>\');
12     msBox=$(\'.mag-sbox\');
13     mBox=$(\'.mag-box\');
14     bs=2;    //倍数
15     msBox.css({width:picBox.width()/2+\'px\',height:picBox.height()/2+\'px\'});
16     mBox.css({\'backgroundSize\':bs*100+\'%\'});
17     picBox.mousemove(function(e){
18         mBox.css(\'backgroundImage\',$(this).css(\'backgroundImage\'));    //给大图背景
19         if(msBox.css(\'display\')!=\'block\'){    //鼠标放上去，出现范围框和效果框
20             msBox.show();
21         }
22         if(mBox.css(\'display\')!=\'block\'){
23             mBox.show();
24         }
25         /* 鼠标移动 */
26         xleft=e.pageX-picBox.offset().left-msBox.width()/2;
27         if(xleft<0){
28             xleft=0;
29         }else if(xleft>picBox.width()-msBox.width()){
30             xleft=picBox.width()-msBox.width();
31         }
32         xtop=e.pageY-picBox.offset().top-msBox.height()/2;
33         if(xtop<0){
34             xtop=0;
35         }else if(xtop>picBox.height()-msBox.height()){
36             xtop=picBox.height()-msBox.height();
37         }
38         msBox.css({\'left\': xleft+\'px\',\'top\': xtop+\'px\'});
39         mBox.css({\'backgroundPosition\':-bs*xleft+\'px \'+-bs*xtop+\'px\'});
40     });
41     picBox.mouseout(function(){
42         msBox.hide();
43         mBox.hide();
44     });