jquery实现图片放大镜功能


Posted in Javascript onNovember 23, 2015

实现原理:

这里用到了两张图片,一张小图,一张大图。将大图设置为放大镜的背景图片,当鼠标在小图上移动时,同时控制背景大图在放大镜中的位置。两张图片大小最好是等比例的,这样才能达到最佳效果。当没有大图时,则默认为小图本身,这时由于两张图片大小一样,因此放大镜效果不明显,就跟没放大是一样的。

此插件用到了html5,css3的一些属性,ie8及以下版本不兼容,放大镜是方形的。

运行效果截图如下:

jquery实现图片放大镜功能

具体代码如下:

(function () {
 $.fn.Magnifier = function (options) {

  //默认参数设置
  var settings = {
   diameter: 150,     //放大镜的直径大小
   borderWidth: 2,     //放大镜边框大小
   borderColor: "white",   //放大镜边框颜色
   backgroundImg: "../img/111.jpg" //放大镜内的图片(即大图)
  };

  //合并参数
  if (options)
   $.extend(settings, options);

  //链式原则
  return this.each(function () {
   //存储当前对象
   var root = $(this);

   //当前对象宽高
   var WRoot = root.width();
   var HRoot = root.height();

   //偏移量 left 和 top
   var offset = root.offset();

   //放大镜样式
   var style = "background-position: 0px 0px;background-repeat: no-repeat;float: left;";
   style += "position: absolute;box-shadow:0 0 5px #777, 0 0 10px #aaa inset;display: none;";
   style += "width: " + String(settings.diameter) + "px;height: " + String(settings.diameter) + "px;";
   style += "border-radius: " + String(settings.diameter / 2 + settings.borderWidth) + "px;";
   style += "border: " + String(settings.borderWidth) + "px solid " + settings.borderColor + ";";

   //创建放大镜
   var magnifier = $("<div style='" + style + "'></div>").appendTo(root.parent());

   //图片(当没有大图时,为小图本身)
   var backgroundImg = settings.backgroundImg ? settings.backgroundImg : root.attr("src");

   //将图片放入放大镜内
   magnifier.css({ backgroundImage: "url('" + backgroundImg + "')" });

   //缩放比例
   var WRatio = 0; //宽度
   var HRatio = 0; //高度

   //图片加载完,计算缩放比例
   //由于图片原本不在DOM文档里,因此页面加载时不会触发load事件,因此要通过执行appendTo来触发load事件
   $("<img style='display:none;' src='" + backgroundImg + "' />").load(function () {
    WRatio = $(this).width() / WRoot;
    HRatio = $(this).height() / HRoot;
   }).appendTo(root.parent());

   //放大镜及其背景图片位置控制
   function Position(e) {

    var LPos = parseInt(e.pageX - offset.left);
    var TPos = parseInt(e.pageY - offset.top);

    //判断鼠标是否在图片上
    if (LPos < 0 || TPos < 0 || LPos > WRoot || TPos > HRoot) {

     magnifier.hide(); //不在隐藏放大镜

    } else {

     magnifier.show(); //反之显示放大镜

     //控制放大镜内背景图片的位置 (settings.diameter / 2)半径
     LPos = String(((e.pageX - offset.left) * WRatio - settings.diameter / 2) * (-1));
     TPos = String(((e.pageY - offset.top) * HRatio - settings.diameter / 2) * (-1));

     magnifier.css({ backgroundPosition: LPos + 'px ' + TPos + 'px' });

     //控制放大镜本身位置
     LPos = String(e.pageX - settings.diameter / 2);
     TPos = String(e.pageY - settings.diameter / 2);

     magnifier.css({ left: LPos + 'px', top: TPos + 'px' });
    }
   }

   //放大镜
   magnifier.mousemove(Position);

   //当前对象
   root.mousemove(Position);

  });
 };
})();

实例DEMO如下:

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>CSS3+jQuery图像放大镜效果</title>
 <style type="text/css">
  body
  {
   background-color: Black;
  }
  .box
  {
   width: 700px;
   margin: 50px auto;
  }
 </style>
</head>
<body>
 <div class="box">

 <!--小图-->
  <img alt="" id="img_02" src="../img/222.gif" width="700" height="500" />
 </div>
 <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script src="../Scripts/jquery.similar.magnifier.js" type="text/javascript"></script>
 <script type="text/javascript">
  $("#img_02").Magnifier();
 </script>
</body>
</html>

关于jquery实现图片放大镜功能的内容就介绍到这里,希望大家仔细研究,学以致用。

Javascript 相关文章推荐
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
Angular2自定义分页组件
Apr 19 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
html5调用摄像头截图功能
Jan 18 Javascript
jquery自定义表格样式
Nov 23 #Javascript
jquery实现表单验证简单实例演示
Nov 23 #Javascript
JavaScript与HTML的结合方法详解
Nov 23 #Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 #Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 #Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 #Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 #Javascript
You might like
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
利用Python优雅的登录校园网
2020/10/21 Python
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
售后专员岗位职责
2013/12/08 职场文书
音乐器材管理制度
2014/01/31 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
会务接待方案
2014/02/27 职场文书
护士求职简历自我评价
2015/03/10 职场文书
大学生求职信怎么写
2015/03/19 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
MySQL插入数据与查询数据
2022/03/25 MySQL