基于Jquery插件开发之图片放大镜效果(仿淘宝)


Posted in Javascript onNovember 19, 2011

需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大!

思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法!

原理:最起考虑的原理是,两张图片,一张小图,一张大图,先获取鼠标在小图上面的坐标,然后以一个div来显示大图,并根据小图的坐标乘以大图除以小图得到的倍数定位!开始是把大图设为平铺不重复北景,然后使用背景的position属性来定位,理果比较理想,但是在IE6下面,图片存在闪烁,于是改成以图片的绝对定位方式显示!

效果图:

基于Jquery插件开发之图片放大镜效果(仿淘宝)

代码:

/* 
* 
* JQUERY 之简易放大镜插件-JNMagnifier 
* Author:翅膀的初衷 
* QQ:4585839 
* Date:2011-11-16 
* 
*/ 
(function($){ 
$.fn.JNMagnifier=function(setting){ 
if(setting&&setting.renderTo){ 
if(typeof(setting.renderTo)=="string"){ 
setting.renderTo = $(setting.renderTo); 
} 
}else{ 
return; 
} 
var _img_org_ = this.children("img"); 
_img_org_.css("cursor","pointer"); 
var __w = 0; 
var __h = 0; 
var __left = this.offset().left; 
var __top = this.offset().top; 
if(this.offsetParent()) 
{ 
__left+=this.offsetParent().offset().left; 
__top+=this.offsetParent().offset().top; 
} 
var _move_x = 0; 
var _move_y = 0; 
var _val_w = (setting.renderTo.width() / 2); 
var _val_h = (setting.renderTo.height() / 2); 
_img_org_.mouseover(function(){ 
setting.renderTo.html('<img src="' + _img_org_.attr("src") + '" style="position:absolute;" id="JNMagnifierrenderToImg" />'); 
setting.renderTo.show(); 
var timer = setInterval(function(){ 
__w = $("#JNMagnifierrenderToImg").width() / _img_org_.width(); 
__h = $("#JNMagnifierrenderToImg").height() /_img_org_.height(); 
if(__w>0){ 
clearInterval(timer); 
} 
},100); 
}); 
_img_org_.mouseout(function(){ 
setting.renderTo.hide(); 
}); 
_img_org_.mousemove(function(e){ 
_move_x =0-Math.round((document.documentElement.scrollLeft+e.clientX-__left) * __w - _val_w); 
_move_y =0-Math.round((document.documentElement.scrollTop+e.clientY-__top) * __h - _val_h); 
$("#JNMagnifierrenderToImg").css({"left":_move_x + "px ","top":_move_y + "px"}); 
}); 
} 
})(jQuery);

调用方法:
$("#ShowPictureBox").JNMagnifier({ 
renderTo:"#ShowBigPictureBox" 
});

HTML
<div id="ShowPictureBox"> 
<img src="图片" width="200" height="200"> 
</div> 
<div id="ShowBigPictureBox" style=" position:absolute; overflow:hidden; display:none; border:3px solid #ccc; padding:5px; background-repeat:no-repeat; background-color:#fff; width:300px; height:300px;"> 
<!--这里显示放大效果--> 
</div>

注意事项:
这里没有使用两张图片,只用了一张图,图片为大图,长宽必须大于放大效果DIV的大小!默认放大倍数为原图与显示小图之间的倍数,如果需要控制放大倍数,可以手动的为“_img_org_.mouseover” 事件中的图片设定对应的长宽就可以实现 
Javascript 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
javascript 定义新对象方法
Feb 20 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 Javascript
js实现三角形粒子运动
Sep 22 Javascript
Vue 实现拨打电话操作
Nov 16 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
20款效果非常棒的 jQuery 插件小结分享
Nov 18 #Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 #Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 #Javascript
Jquery 获取checkbox的checked问题
Nov 16 #Javascript
JS 操作符整理[推荐收藏]
Nov 15 #Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 #Javascript
关于js datetime的那点事
Nov 15 #Javascript
You might like
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
php实现文件预览功能
2017/05/23 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
pytorch 共享参数的示例
2019/08/17 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
毕业生物理教师求职信
2013/10/17 职场文书
应届生护士求职信
2013/11/01 职场文书
党员公开承诺书范文
2014/03/25 职场文书
投标服务承诺书
2014/05/28 职场文书
民主评议党员工作总结
2014/10/20 职场文书
导游词开场白
2015/01/31 职场文书
新员工试用期自我评价
2015/03/10 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
2016新年年会主持词
2015/07/06 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript