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的一个扩展form序列化到json对象
Dec 09 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
Vue header组件开发详解
Jan 26 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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 $_SERVER详解
2009/01/16 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
PHP分页类集锦
2014/11/18 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
Bootstrap基础学习
2015/06/16 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
Python 可爱的大小写
2008/09/06 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
Python 占位符的使用方法详解
2019/07/10 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
2015暑假假期总结
2015/07/13 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis