基于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 相关文章推荐
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
js 操作符汇总
Nov 08 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
全面分析JavaScript 继承
May 30 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
详解TypeScript中的类型保护
Apr 29 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之第七天
2006/10/09 PHP
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
php商品对比功能代码分享
2015/09/24 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
Python操作MySQL简单实现方法
2015/01/26 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python实现linux下抓包并存库功能
2018/07/18 Python
Python3多线程基础知识点
2019/02/19 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
使用python实现kNN分类算法
2019/10/16 Python
如何基于Python实现自动扫雷
2020/01/06 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
个人作风剖析材料
2014/02/02 职场文书
初婚初育证明范本
2014/11/24 职场文书
2014小学年度工作总结
2014/12/20 职场文书
给老婆道歉的话
2015/01/20 职场文书
人事专员岗位职责
2015/02/03 职场文书
小学教师读书笔记
2015/07/01 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
Python如何加载模型并查看网络
2022/07/15 Python