修改网站前端,需要放大镜效果,试着写了个
效果如下:
图片大框初始样式:
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(' ');4 picBox.append(' ');
添加样式表
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(' '); 8 picBox=$('.goods-imginfo-bimg-box'); 9 picBox.css('position','relative');10 picBox.append(' ');11 picBox.append(' ');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 });