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写动态树示例代码
Jul 31 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
Vue formData实现图片上传
Aug 20 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
JavaScript实现复选框全选功能
Apr 11 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
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
js快速排序的实现代码
2013/12/08 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
python 基于wx实现音乐播放
2020/11/24 Python
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
和解协议书
2014/04/16 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
政风行风评议工作总结
2014/10/21 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
2014年英语工作总结
2014/12/20 职场文书
党员个人自我评价
2015/03/03 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
教你怎么用Python生成九宫格照片
2021/05/20 Python