<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         #big {

             width: 400px;

             height: 400px;

             border: 1px solid black;

             overflow: hidden;

             display: none;

             position: absolute;

             background-color: white;

             background-image: url('./image/1.bmp');

             opacity: 0.8;

         }

         #small {

             width: 350px;

             height: 350px;

             border: 1px solid black;

             background-image: url('./image/11.bmp');

         }

         #img {

             width: 800px;

             height: 800px;

         }

         #div {

             width: 175px;

             height: 175px;

             background-color: blue;

             opacity: 0.5;

             position: absolute;

             display: none;

         }

     </style>

 </head>

 <body>

     <div id="small">

         <div id="div"></div>

         <!-- <img src="./image/11.bmp" /> -->

     </div>

     <div id="img">

         <div id="big">

             <!-- <img src="./image/1.bmp" /> -->

         </div>

     </div>

     <script src="./jquery-1.12.4.min.js"></script>

     <script>

         //当鼠标在图片上移动时的操作

         $(window).on('load', function () {

             $("#small").on('mouseenter', function () {

                 let position = $(this).position();//获取small偏移

                 $("#big").css({//大的图片距离小的图片的距离

                     top: position.top,

                     left: position.left + $(this).width() + 80

                 }).show();

             })

             $("#small").on('mousemove', function (e) {//鼠标在图片上移动

                 let left1 =e.pageX-$(this).offset().left;

                 let top1=e.pageY-$(this).offset().top;

                 left1=left1-80<0?90:left1;

                 top1=top1-80<0?90:top1;

                 left1=left1-80>175?263:left1;

                 top1=top1-80>175?263:top1;

                 $('#div').css({//小方块显示

                     display: "block",

                     left:left1-80,

                     top:top1 -80

                 })

                 let position = $(this).position();

                 //第一种

                 //计算鼠标在图片上面的偏移坐标

                 // let X = e.pageX - position.left;

                 // let Y = e.pageY - position.top;

                 // //定位放大镜的距离

                 // $("#big").scrollTop(Y-100).scrollLeft(X-100);

                 // //第二种

                 let x =$("#div").position().left/350*800;

                 let y =$("#div").position().top/350*800;

                 $("#big").css({

                     backgroundPosition:`-${x}px -${y}px`

                 })

             });

             $("#small").on('mouseleave', function () {//鼠标移出时

                 $("#big").css({

                     display: "none"

                 })

                 $('#div').css({//小方块显示

                     display: "none",

                 })

             })

             // console.log($.unique($.merge([1,2],[2,3,4])))

         })

     </script>

 </body>

 </html>

用JavaScript中jQuery编写放大镜效果的更多相关文章

  1. 使用jquery实现放大镜效果

    原文:使用jquery实现放大镜效果 实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整 ...

  2. jQuery实现放大镜效果

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

  3. js、jquery实现放大镜效果

    在一些电商网站的商品详情页面,都会有放大镜效果,实现起来并不是很困难,今天用了两个小时,写了一个放大镜效果的实例,来分享给大家! 实现的效果大概是这个样子的 预览 先来看一下效果吧,点击下面的链接预览 ...

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

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

  5. js---电商中常见的放大镜效果

    js中的放大镜效果 在电商中,放大镜效果是很常见的,如下图所示: 当鼠标悬浮时,遮罩所在区域在右侧进行放大. 在动手写之前,我们要先理清思路,分析需求,所需知识点,再将每一块进行组装,最后进行功能的完 ...

  6. JavaScript实现的网页放大镜效果

    今天在观看视频学习的时候,学到了一个小技巧.就拿过来与大家进行分享一下啦. 实现的原理 分析需求:需要两张图,一大一小.然后根据鼠标的动作显示出不同的区域块的图像. 核心:鼠标事件的获取和处理.图片显 ...

  7. javascript中的省市级联效果

    学习javascript的时候都遇到过这样的需求,不仅是省市,还有其他的一些场景,看看关键的代码有哪些吧. <head runat="server"> <titl ...

  8. Jquery版放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 用jquery实现放大镜效果

    ----css代码--- *{margin:0;padding:0;} .showimg{position:relative;width:450px;height:420px;border:1px s ...

随机推荐

  1. 一类划分关系和指数级生成函数，多项式exp的关系

    划分关系 姑且这么叫着 设满足性质 \(A\) 的集合为 \(S_A\),每个元素有标号 如果 \(S_B\) 是由若干个 \(S_A\) 组成的一个大集合 设 \(a_i\) 表示大小为 \(i\) ...

  2. BZOJ P4720[Noip2016]换教室____solution

    题目太长不表 <--无形传送,最为致命 学习一点数学期望的基础,预处理最短路,然后加上DP即可.(废话) 理解决策和结果的差别: 在这里每阶段的决策有两个:申请|不申请 结果有两个:换|不换 然 ...

  3. react与vue

    vue的选择居于react与angular之间,框架自身的语法比react多一点,但是又比angular少一点. 也正是由于选择的不同,所呈现出来的写法与思考方式就一定会有所差异,不论优劣,但肯定会导 ...

  4. Android学习笔记(2)----LocationManager的使用

    今天使用Android的LocationManager制作了一款获取当前经纬坐标位置的软件. LocationManager获取的只是经纬坐标点,为了解析出当前经纬坐标点的实际位置,可以使用Googl ...

  5. bootstrap 的模态框的宽与高设置

    1,改变bootstrap 的宽与高, 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上,整个模态框的 ...

  6. 对一些ArcGIS for JS的API的一些理解

    1.esri/map map类是每个地图控件中必须引入的类,我们可以通过Map()对地图进行许多的操作,比如修改地图的坐标系.显示级别和初始显示范围等等.   Map有一个类型为GraphicsLay ...

  7. SQL一次性查询一个字段不同条件下的统计结果

    参考了一下这篇文章:https://blog.csdn.net/xichenguan/article/details/51764100 , 感谢原作者 有两个表,分别存放了[操作员]和[单据],要根据 ...

  8. 一些很酷的.Net技巧 .

    一．.Net Framework 1．  如何获得系统文件夹 使用System.Envioment类的GetFolderPath方法:例如: Environment.GetFolderPath( En ...

  9. django导入/导出原始数据

    1.使用dumpdata命令导出指定app对应数据库中的数据: python manage.py dumpdata your_app --indent 4  > your_app/fixture ...

  10. 安装SCOM Gateway Server

    安装SCOM Gateway Server 1.为SCOM Gateway Server申请证书,导入CA证书链2.将安装介质Support Tools下AMD64下的 Microsoft.Enter ...