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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
跨域表单提交状态的变相判断代码
Nov 12 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 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
一个好用的分页函数
2006/11/16 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
Python 中的 else详解
2016/04/23 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
python3.5仿微软计算器程序
2020/03/30 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
我的大学生活职业生涯规划
2014/01/02 职场文书
个人求职自荐信范文
2014/06/20 职场文书
怎么写工作检讨书
2014/11/16 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
win10清理dns缓存
2022/04/19 数码科技