实现图片放大镜的原理：

  1. 给放大镜元素一个对应的html元素为<div class='right'>
  2. 设置这个div的宽高固定为某个值（350px，350px）
  3. 设置div的css为超出部分隐藏
  4. div中嵌套子元素img设置宽高固定为某个值（2560px，1600px）
  5. 通过数学函数计算，移动div的x轴和y轴的滚动条，正好让放大镜显示刺客鼠标在大图的那一块区域。

部分函数功能介绍：

attr()方法：获取或更改对应的DOM元素的属性值

  • 获取：$("div").attr("属性名称")
  • 更改：$("div").attr("属性名称","属性值")

mouseover()：鼠标移入事件

mouseout()：鼠标移出事件

scrollTop()：获取或设置匹配元素相对滚动条顶部的偏移

scrollLeft()：获取或设置匹配元素相对滚动条左侧的偏移

源代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>jQuery实现放大镜效果</title>
  6.         <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
  7.         <style>
  8.             #contain{
  9.                 width:80%;
  10.                 height:500px;
  11.                 margin:0 auto;
  12.             }
  13.             .left{
  14.                 float:left;
  15.             }
  16.             .right{
  17.                 float:left;
  18.                 width:350px;
  19.                 height:350px;
  20.                 overflow:hidden;/*超出部分隐藏*/
  21.                 padding:0px;
  22.                 display:none;/*默认先不显示*/
  23.             }
  24.             .up{
  25.                 width:320px;
  26.                 height:200px;
  27.                 padding:30px;
  28.             }
  29.             .up img{
  30.                 width:320px;
  31.                 height:200px;
  32.             }
  33.             .down{
  34.                 padding:20px;
  35.                 padding-left:35px;
  36.             }
  37.             .down img{
  38.                 width:64px;
  39.                 height:40px;
  40.                 border:3px solid #ccc;
  41.             }
  42.         </style>
  43.     </head>
  44.     <body>
  45.         <div id="contain">
  46.             <div class="left">
  47.                 <div class="up">
  48.                     <img src="img/06.jpg" bigimage>
  49.                 </div>
  50.                 <div class="down">
  51.                     <img src="img/06.jpg" smallimage>
  52.                     <img src="img/07.jpg" smallimage>
  53.                     <img src="img/08.jpg" smallimage>
  54.                     <img src="img/09.jpg" smallimage>
  55.                 </div>
  56.             </div>
  57.             <div class="right">
  58.                 <img src="" mirror>
  59.             </div>
  60.         </div>
  61.     </body>
  62.     <script>
  63.         /**
  64.          * 完成下面选择图片的效果：
  65.          *         1.当鼠标放置在下面的小图片时，改变边框属性
  66.          *         2.更改含有bigimage的img标签的src，进行图片更换
  67.          */
  68.         $("[smallimage]").mouseover(function(){
  69.             var address = $(this).css("border","3px solid red").attr("src");
  70.             $("[bigimage]").attr("src",address);
  71.         }).mouseout(function(){
  72.             $(this).css("border","3px solid #ccc");
  73.         });
  74.         /**
  75.          * 大图鼠标移动事件：
  76.          *         1.设置mirror所在的img标签的display属性为block，即让它显示
  77.          *         2.当鼠标在内部移动的时候，通过计算，在mirror中进行放大显示
  78.          * 鼠标移出事件：
  79.          *         设置mirror不可见 display:none
  80.          */
  81.         $("[bigimage]").mousemove(function(even){
  82.             //获取大图的相对文档的偏移量
  83.             var offset = $(this).offset();
  84.             //获取鼠标相对于大图左上角的x轴偏移量
  85.             var x = even.pageX - offset.left;
  86.             //获取鼠标相对于大图左上角的y轴偏移量
  87.             var y = even.pageY - offset.top;
  88.             //设置放大镜放大倍数，可自行设置
  89.             var multiple = 8;
  90.             //获取放大镜所在div的宽度和高度
  91.             var mirrorwidth = $(".right").width();
  92.             var mirrorHeight = $(".right").height();
  93.             //获取bigimage此时的src的值
  94.             var address = $(this).attr("src");
  95.             //更改放大镜的src的值，切换图片
  96.             $("[mirror]").attr("src",address);
  97.             $(".right").css("display","block").scrollLeft(Math.max(x*multiple - mirrorwidth/2.0)).scrollTop(Math.max(y*multiple - mirrorHeight/2.0));
  98.         }).mouseout(function(){
  99.             $(".right").css("display","none");
  100.         });
  101.     </script>
  102. </html>

效果图：

1.鼠标经过下面的小图片：

2.放大效果：

jQuery实现图片放大镜效果的更多相关文章

  1. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

  2. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  3. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  4. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

  5. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  6. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  7. Jquery插件开发之图片放大镜效果(仿淘宝)

    原网转载地址:http://www.cnblogs.com/hnvvv/archive/2011/11/19/2255197.html 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部 ...

  8. 关于jQuery中实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  9. jQuery插件:图片放大镜--jQuery Zoom

    本文转载于http://blog.csdn.net/xinhaozheng/article/details/4085644, 这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,m ...

随机推荐

  1. spring mvc绑定参数之 类型转换 有三种方式:

    spring mvc绑定参数之类型转换有三种方式: 1.实体类中加日期格式化注解(上次做项目使用的这种.简单,但有缺点,是一种局部的处理方式,只能在本实体类中使用.方法三是全局的.) @DateTim ...

  2. Day1-B-CF-1144B

    简述:有一个n个元素的序列,选奇数下一个就选偶数,偶数则下一个就是奇数,问能否取完,能取完输出0,否则输出能剩下的最小的之和 思路:统计奇偶数个数,若相等或相差一则取完,否则排列后取出最小的前x个(x ...

  3. Node.js npm基础安装配置&创建第一个VUE项目

    使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...

  4. unity优化-CPU(网上整理)

    CPU方面性能考虑:引擎和代码渲染模块.动画模块.物理模块.ui模块.粒子模块.加载模块.GC模块最重要的是渲染模块.UI模块和加载模块1.渲染模块主要是:场景.物体和特效的渲染a.降低Draw ca ...

  5. Linux 运维常用命令

    参考: https://segmentfault.com/a/1190000009745139 http://blog.51cto.com/xuqq999/774714 .查看有多少个IP访问: aw ...

  6. Linux centosVMware Vim介绍、vim颜色显示和移动光标、vim一般模式下移动光标、vim一般模式下复制、剪切和粘贴

    一.Vim介绍 vim 是一款功能强大的文本编辑器,是vi的升级版,带有颜色显示, 默认有三种模式:一般模式, 命令模式,  编辑模式   安装Vim [root@davery ~]# vim /et ...

  7. Gridview的stretchMode详解附自动宽度

    <GridView android:id="@+id/grid" android:layout_width="fill_parent" android:l ...

  8. 图的数据结构的实现与遍历(DFS,BFS)

    //图的存储结构:const int MAXSIZE = 10;//邻接矩阵template<class T>class MGraph {public:    MGraph(T a[], ...

  9. 物联网学习笔记——构建RESTFul平台1

    0.前言     前些时间顺着Yeelink学习了RESTFUL,使用PHP和Slim框架尝试实现简单的REST API,树莓派可通过GET方法获得JSON数据包,通过这种方式实现了树莓派和服务器(我 ...

  10. syx学习笔记

    SYX复活了,在悲痛之际,希望能让自己获得更多的知识,更有进步,所以留此博客 数学 推荐blog: 1 2 原根表 FFT(快速傅里叶变换) 2019/12/05 √ 博客 blog 题目 Q1 NT ...