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 相关文章推荐
Javascript 继承机制的实现
Aug 12 Javascript
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 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笔记之:数据类型与常量的使用分析
2013/05/14 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
php构造函数与析构函数
2016/04/23 PHP
javascript数组去掉重复
2011/05/12 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
js分页代码分享
2014/04/28 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
python操作gmail实例
2015/01/14 Python
python中set常用操作汇总
2016/06/30 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
Python远程方法调用实现过程解析
2020/07/28 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
银行工作检查书范文
2014/01/31 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python