版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20086125/article/details/80311930
页面图片新增放大镜功能，其实是对图片展示处理时强制进行缩放使页面布局合理，但图片的观看效果确实大打折扣，这里在图片展示区域新增放大镜功能，以解决这样的问题。放大镜的实质就是在图片的附近隐藏一个（原图或放大的原图）尺寸比显示界面更大的背景图片，利用样式遮罩显示局部图片，以达到放大的效果；这里要强调，背景图片的位置（默认左上对齐）与页面的图片的实际布局有关，如果实际页面的图片在展示页面有偏离，需要计算偏移量来将对应的背景图片位置偏移；
1.jsp页面部分引用：（依赖jquery.min.js，自己要引入）
<link rel="stylesheet" href="<%=path%>/static/common/magnify/docs/css/showmanagnify.css">
以上为放大镜的样式（如下）
/*放大镜样式*/ /*Lets create the magnifying glass*/ .magnify-large { width: 132px; height: 132px; position: absolute; border-radius: 100%; z-index: 20; /*Multiple box shadows to achieve the glass effect*/ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 4px 4px rgba(0, 0, 0, 0.25), inset 0 0 10px 2px rgba(0, 0, 0, 0.25); /*hide the glass by default*/ display: none; } /*To solve overlap bug at the edges during magnification*/ .small { display: block; }
<script type="text/javascript" src="<%=path%>/static/common/magnify/src/js/showmagnify.js"></script>
对显示图片的位置进行处理（页面显示的实际大小根据需要调整，不设置则显示）
<div id="inImage"> <div id="magnify-large1" class="magnify-large"></div> <img id="inImg" height="240" width="300" class="small" src="<%=path%>/static/images/notExistImg.jpg"> </div>
2.放大镜工具showManagnify.js 如下:
/** * [showManagnify] * @param {String} directionTop [图片的方向] * @param {String} directionLeft [图片的方向] * @param {[Object]} num [图片的左边的对象] * @param {[Object]} stage [small 外层div] * @param {[Object]} small [image 对象] * @param {[Object]} large [large div] * @param {String} image [image src] */ function showManagnify(directionTop,directionLeft,num,stage,small,large, imageUrl) { // The native width and height of the image. var defaults = { scaling: 0.3 }; // Combines object defaults and options. var options = $.extend(defaults, options), native_width = 0, native_height = 0, current_width = 0, current_height = 0, $small = small, $stage = stage, $large = large; if(directionTop!=null&&num!=null){ var $directionTop=directionTop; var $num=num; } if(directionLeft!=null&&num!=null){ var $directionLeft=directionLeft; var $num=num; } $stage.mousemove(function (e) { /* Act on the event */ if (!native_width && !native_height) { var image_object = new Image(); image_object.src = imageUrl; // Gets the image native height and width. native_height = image_object.height; native_width = image_object.width; // Gets the image current height and width. current_height = $small.height(); current_width = $small.width(); if(native_width-current_width<100){ native_width=current_width+160; } if(native_height-current_height<100){ native_height=current_height+160; } //给large赋背景图 $large.css("background-image","url("+imageUrl+")"); $large.css("background-size", native_width + "px " + native_height + "px"); $large.css("background-repeat","no-repeat"); } else { // Gets .maginfy offset coordinates. var magnify_offset = $(this).offset(), w=$(this).width(), h=$(this).height(); // Gets coordinates within .maginfy. mx = e.pageX - magnify_offset.left, my = e.pageY - magnify_offset.top; // Checks the mouse within .maginfy or not. if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) { $large.fadeIn(100); } else { $large.fadeOut(100); } if ($large.is(":visible")) { var rx = Math.round(mx / $small.width() * native_width - $large.width() /2) * -1, ry = Math.round(my / $small.height() * native_height - $large.height()/2 ) * -1, bgp = rx + "px " + ry + "px", px = mx - $large.width()/ 2, py = my - $large.height()/ 2; /*背景图片右对齐*/ if($directionLeft==="right"&&$num!=null){ px=mx - $large.width()/ 2+$num.width(); } if($directionLeft==="padding-left"&&$large!=null){ px=mx - $large.width()/ 2+magnify_offset.left; } if($directionTop==="padding-top"&&$num!=null){ py = my - $large.height()/ 2+$num.height(); } if($directionTop==="bottom"&&$num!=null){ py = my - $large.height()/ 2+$num.height()/2; } $large.css({ left: px, top: py, backgroundPosition: bgp }); } } }); //当鼠标离开图片时去除放大镜样式 $stage.mouseleave(function(){ //去除放大镜显示效果 $large.removeClass("magnify-large"); }); //当鼠标在图片时新增放大镜样式 $stage.mouseenter(function(){ //新增放大镜显示效果 $large.addClass("magnify-large"); }); }
3.异步请求后展示调用(自己写ajax请求获取图片url):
var deafultInUrl=$("#inImg").attr("src");//默认图片路径 var deafultOutUrl=$("#outImg").attr("src");//默认图片路径
success:function(returnData){ if(null != returnData ){ if(null !=returnData["inImgUrl"] && "" != returnData["inImgUrl"] &&returnData["inImgUrl"] != "null"){ $("#inImg").attr("src",returnData["inImgUrl"]); deafultInUrl=returnData["inImgUrl"]; } //查看调用放大镜功能 showManagnify(null,null,null,$("#inImage"),$("#inImg"),$("#magnify-large1"), deafultInUrl); if(null !=returnData["outImgUrl"] && "" != returnData["outImgUrl"] &&returnData["outImgUrl"] != "null"){ $("#outImg").attr("src",returnData["outImgUrl"]); deafultOutUrl=returnData["outImgUrl"]; } //查看调用放大镜功能 showManagnify(null,"right",$("#inImage"),$("#outImage"),$("#outImg"),$("#magnify-large2"), deafultOutUrl); } }
这里说明一下,showManagnify()函数的前三个主要是用来计算背景图图片偏移的,大家可以看showManagnify.js 自行调整;
写好展示的效果如图:
