各大商城详细页面产品图片特效展示，鼠标滑过小图显示中图，鼠标滑过中图显示大图展示，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 /* * 放大镜效果 * 不改变前面的代码 * 添加放大镜效果 * 给 goods-imginfo-bimg-box； * */ $(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(xleftpicbox.width()-msbox.width()){ xleft=picbox.width()-msbox.width(); } xtop=e.pagey-picbox.offset().top-msbox.height()/; if(xtoppicbox.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实现放大镜效果，希望大家喜欢。