基于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 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
jQuery 中DOM 操作详解
Jan 13 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
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代码优化及php相关问题总结
2006/10/09 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
详解php实现页面静态化原理
2017/06/21 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
javascript实现手动点赞效果
2019/04/09 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
python 字符串split的用法分享
2013/03/23 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python生成器常见问题及解决方案
2020/03/21 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
学习十八大报告感言
2014/02/04 职场文书
个人实习生的自我评价
2014/02/16 职场文书
2019年工作总结范文
2019/05/21 职场文书
oracle索引总结
2021/09/25 Oracle
springboot实现string转json json里面带数组
2022/06/16 Java/Android