jQuery chili图片远处放大插件


Posted in Javascript onNovember 30, 2009

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

首先定义结构:
<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>
然后考虑图片预加载:
$.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://3water.com/jiaoben/22866.html

Javascript 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 #Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 #Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 #Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 #Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 #Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 #Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 #Javascript
You might like
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
PHP微信红包API接口
2015/12/05 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
Python中防止sql注入的方法详解
2017/02/25 Python
用Django写天气预报查询网站
2018/10/21 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Pycharm修改python路径过程图解
2020/05/22 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
本科毕业自我鉴定
2014/03/20 职场文书
食品销售计划书
2014/04/26 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
如何在python中实现ECDSA你知道吗
2021/11/23 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript