基于jquery实现放大镜效果_jquery
程序员文章站
2022-05-07 20:25:29
...
各大商城详细页面产品图片特效展示,鼠标滑过小图显示中图,鼠标滑过中图显示大图展示,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实现放大镜效果,希望大家喜欢。