<!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. 51NOD1847：奇怪的数学题

    传送门 Sol 设 \(f(d)\) 表示 \(d\) 所有约数中第二大的,\(low_d\) 表示 \(d\) 的最小质因子 \[f(d)=\frac{d}{low_d}\] 那么 \[\sum_{ ...

  2. [转]运用@media实现网页自适应中的几个关键分辨率

    转自百度经验:http://jingyan.baidu.com/article/6f2f55a1ab36c3b5b83e6c46.html 经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用 ...

  3. C++学习笔记(2)----类模板和友元

    当一个类包含一个友元声明时,类与友元各自是否是模板是相互无关的.如果一个类模板包含一个非模板友元,则友元被授权可以访问所有模板实例.如果友元自身是模板,类可以授权给所有友元模板实例,也可以只授权给特定 ...

  4. 强化学习系列之:Deep Q Network (DQN)

    文章目录 [隐藏] 1. 强化学习和深度学习结合 2. Deep Q Network (DQN) 算法 3. 后续发展 3.1 Double DQN 3.2 Prioritized Replay 3. ...

  5. 【html/css】若母div设置了透明度，如何才能使得里面的子div不继承母div的透明度

    用rgba的方式给母div设置透明度的话就不会影响子div的透明度了. 例: background: rgba(51, 51, 51, 0.5);

  6. [C++]多线程: 教你写第一个线程

    原文:http://blog.csdn.net/cn_wk/article/details/62236057 hello thread! 声明线程A的端口号 #include <pthread. ...

  7. 微信小程序-02-项目文件之间配合和调用关系

    微信小程序-02-项目文件之间配合和调用关系 我就不说那么多了,我是从官方文档拷贝的,然后加上一些自己的笔记,不喜勿喷 官方文档:https://developers.weixin.qq.com/mi ...

  8. 解决nginx使用proxy_pass反向代理时,session丢失的问题

       这2天在测试Nginx作为反向代理到Tomcat应用时,session丢失的问题.经过一系列查看官方文档和测试,发现如下:1.如果只是host.端口转换,则session不会丢失.例如:     ...

  9. leetcode coding base

    1. Contains Duplicate 2. Contains Duplicate II 3. Contains Duplicate III

  10. Java学习---Quartz定时任务快速入门

    Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或为运行十个,百个, ...