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

首先定义结构:
 
<div class="imgMagnifierWrap"> 
<div class="overlay"><!--覆盖层,鼠标的感应区域,位于小图上最方--></div> 
<div class="tipboxHover"><!--小图上方的悬停提示方框--></div> 
<div class="imgOriginal"><!--装载大图的容器,绝对定位<img src="/UploadFiles/2021-04-02/bigOne.jpg"> 
 
<!--样式--> 
<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> 
然后考虑图片预加载:
 
$.imgPreloader=function(url,eventLists){ 
var img=new Image(); 
var $img=$(img); 
img.src=url; 
$.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事件都可以正常工作:
 
$.imgPreloader($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(); 
}; 

随便一提,如果有一种浏览器,也许会很幸运。
演示代码
打包下载 https://www.jb51.net/jiaoben/22866.html

标签:
图片放大

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jQuery chili图片远处放大插件”

暂无“jQuery chili图片远处放大插件”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。