加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 （https://www.hunanwang.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 业界 > 正文

图像远处放大成果 基于jQuery编写

发布时间：2018-08-20 14:50:00 所属栏目：业界 来源：站长网
导读：为了让当舆图片、长途图片、过小的图片都顺应此插件，有许多细节题目要处理赏罚。 起首界说布局： Copy to Clipboard 引用的内容：[www.veryhuo.com]div class=imgMagnifierWrap div class=overlay!--包围层，鼠标的感到地区，位于小图上最方--/div div class=

为了让当舆图片、长途图片、过小的图片都顺应此插件，有许多细节题目要处理赏罚。
起首界说布局：

Copy to ClipboardLiehuo.Net Codes引用的内容：[www.veryhuo.com] <div class="imgMagnifierWrap">
<div class="overlay"><!--包围层，鼠标的感到地区，位于小图上最方--></div>
<div class="tipboxHover"><!--小图上方的悬停提醒方框--></div>
<div class="imgOriginal"><!--装载大图的容器，绝对定位<img src="bigOne.jpg" /><!--远景大图，绝对定位--></div>
</div>
<!--样式-->
<style type="text/css">
.imgMagnifierWrap *{position:absolute;background:#fff;}
.imgMagnifierWrap .tipboxHover{width:80px; height:60px; filter:alpha(opacity=30);opacity:.3;display:none;}
.imgMagnifierWrap .imgOriginal{display:none;z-index:9999;overflow:hidden; width:400px; height:400px;
background-color:#cdf; background-repeat:no-repeat; text-align:center;border:1px solid #555; }
.imgMagnifierWrap .overlay{cursor:crosshair;filter:alpha(opacity=0);opacity:0;}
<style>

然后思量图片预加载:

Copy to ClipboardLiehuo.Net Codes引用的内容：[www.veryhuo.com] $.imgploader=function(url,eventLists){
var img=new Image();
var $img=$(img);
img.src=url; title="liehuo.net"
$.each(eventLists,function(type,fn){
$img.bind(type,fn);
});
$img.trigger(img.complete?'load':'begin');
return $img;
};

再计较感到地区：
小图所处感到地区四边各减去指示方框各四边的1/2巨细的矩形，在此之外的地区则表现到大图界线：

Copy to ClipboardLiehuo.Net Codes引用的内容：[www.veryhuo.com] var borderLeft =thumbInfo.left+tipboxInfo.width/2;
var ratioX=(mouseInfo.x-borderLeft)/(thumbInfo.width-tipboxInfo.width);

用大图用做配景图片激发的题目：
用潜匿的远景图片预加载，load变乱判定机缘，ie,chrome正常，ff哀求了两次图片，图片未缓存;
换一种方法，不预载大图。改成直接在大图位置用包围层做“loading”后,chrome下示意为渐进加载图片，非chrome是直接表现，略有遗憾。
最终功效，把大图用做远景图片：
上风在于，大图的load和error变乱都可以正常事变：

Copy to ClipboardLiehuo.Net Codes引用的内容：[www.veryhuo.com] $.imgploader($anchor.attr('href'),{
load:function(){
isImageReady=true;
$o.empty().append(this);
setTimeout(autoFitPicture,0);
},
begin:function(){
$o.text('loading...');
},
error:function(){
isImageReady=true;
$o.text('invalid picture!');
}
});

大图预载的load变乱和小图mousemove变乱差异步的办理步伐：及时存储鼠标坐标，把提醒方框定位和大图定位的要领疏散。 

Copy to ClipboardLiehuo.Net Codes引用的内容：[www.veryhuo.com] //鼠标位置存储
var mouseInfo={x:0,y:0};
//指示框定位
var setTipboxPosition=function(e){
mouseInfo.x=e.pageX;
mouseInfo.y=e.pageY;
$tipbox.css({
top:mouseInfo.y<thumbInfo.width/2+thumbInfo.top
?Math.max(mouseInfo.y-tipboxInfo.height/2,thumbInfo.top)
:Math.min(mouseInfo.y-tipboxInfo.height/2,thumbInfo.top+thumbInfo.height-tipboxInfo.height),
left:mouseInfo.x<thumbInfo.width/2+thumbInfo.left
?Math.max(mouseInfo.x-tipboxInfo.width/2,thumbInfo.left)
:Math.min(mouseInfo.x-tipboxInfo.width/2,thumbInfo.left+thumbInfo.width-tipboxInfo.width)
});
setImgPosition();
};

任意一提，假若有一种赏识器，大概会很荣幸。