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 });
