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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
javascript实现弹出层效果
Dec 10 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 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中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
php实现微信模板消息推送
2018/03/30 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python 私有函数的实例详解
2017/09/11 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
护理专业本科生自荐信
2013/10/01 职场文书
大学生就业自荐信
2013/10/26 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
导游词之无锡古运河
2019/11/14 职场文书
Spring实现内置监听器
2021/07/09 Java/Android
使用CSS连接数据库的方式
2022/02/28 HTML / CSS