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 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
javascript实现微信分享
Dec 23 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
vue实现商城秒杀倒计时功能
Dec 12 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
MySQL修改密码方法总结
2008/03/25 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
基于Python脚本实现邮件报警功能
2020/05/20 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
《石榴》教学反思
2014/03/02 职场文书
办公室主任职责范本
2014/03/07 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
房屋出售授权委托书
2014/10/12 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
ant design charts 获取后端接口数据展示
2022/05/25 Javascript