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.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
Vue通过input筛选数据
Oct 26 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
vue组件横向树实现代码
Aug 02 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
AJAX检测用户名是否存在的方法
Mar 24 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
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
浅析php原型模式
2014/11/25 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python计算列表内各元素的个数实例
2018/06/29 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
python 字典套字典或列表的示例
2019/12/16 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
Python如何读取、写入JSON数据
2020/07/28 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
颁奖典礼主持词
2014/03/25 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
员工辞职信范文
2015/03/02 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
django上传文件的三种方式
2021/04/29 Python
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
python 中的jieba分词库
2021/11/23 Python
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技