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 相关文章推荐
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
php简单提示框alert封装函数
2010/08/08 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
js+html制作简单验证码
2017/02/16 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
js实现内置计时器
2019/12/16 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
python对url格式解析的方法
2015/05/13 Python
Python变量作用范围实例分析
2015/07/07 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
远东集团网络工程师面试题
2014/10/20 面试题
招聘单位介绍信
2014/01/14 职场文书
运动会广播稿30字
2014/01/21 职场文书
企业安全生产责任书
2014/04/14 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
旷工辞退通知书
2015/04/17 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书