国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > jquery > 图像远处放大功能 基于jQuery编写

图像远处放大功能 基于jQuery编写

来源:程序员人生   发布时间:2014-04-19 23:13:16 阅读次数:2844次

为了让本地图片、远程图片、过小的图片都适应此插件,有很多细节问题要处理。
首先定义结构:

<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>

然后考虑图片预加载:

$.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大小的矩形,在此之外的区域则显示到大图边界:

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事件都可以正常工作:

$.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事件不同步的解决办法:实时存储鼠标坐标,把提示方框定位和大图定位的方法分离。 

//鼠标位置存储
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();
};

随便一提,如果有一种浏览器,也许会很幸运。


提示:可修改后代码再运行!

文章来自:http://www.cnblogs.com/ambar/

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生