<!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. safari

    http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/ http://rawgit.com/zha ...

  2. POJ P2104 K-th Number

    You are working for Macrohard company in data structures department. After failing your previous tas ...

  3. 【一些简单的jQuery选择器】

    学习[js DOM 编程艺术],最后面有许多jQuery的选择器,每个都动手敲了一遍. jQuery 提供了高级选择器的方法. js获取元素的三个基本方法分别是通过标签名,类名和id,即(getEle ...

  4. spring 与mybatis 整合总结

    刚看完同学给我的代码,我忍不住爆粗.去TMD,写得像坨屎,恶心,乱七八糟,这让我怎么交差??一行代码注释都没有,还很自以为是的傲慢.“这都不懂?这就是Mybatis啊,有很多种方法实现.....” 操 ...

  5. C++多线程编程（★入门经典实例★）

    原文:http://www.cnblogs.com/codingmengmeng/p/5913068.html 多线程在编程中有相当重要的地位,我们在实际开发时或者找工作面试时总能遇到多线程的问题,对 ...

  6. PHP array_flip() array_merge() array+array的使用总结

    array_flip(array); //传递一个数组参数,对该数组的键.值进行翻转 例如: $a = array( 'a', 'b', 'c' ); print_r(array_flip($a)); ...

  7. 线性表的Java实现--链式存储（单向链表）

    单向链表(单链表)是链表的一种,其特点是链表的链接方向是单向的,对链表的访问要通过顺序读取从头部开始. 链式存储结构的线性表将采用一组任意的存储单元存放线性表中的数据元素.由于不需要按顺序存储,链表在 ...

  8. 网络测速 php代码

    <?php /*=====http://hi.csdn.net/yinyiniao=====*/ $fp=fopen("cs.txt","w"); for ...

  9. TCP协议 状态解析和状态统计

    一.三次握手和四次挥手 1.建立连接(三次握手)   (1)服务器会处于listen状态,客户端发送一个带SYN标志的TCP报文到服务器.   (2)服务器端回应客户端的请求,这是三次握手中的第2个报 ...

  10. ERP行业销售如何挖掘潜在客户？

    要看不同阶段,小企业发展到一定程度,第一个需求是单体财务系统.因为这个时候财务忙不过来了.在大一点就需要业务系统了,就是生产+进销存.有分公司就有集团级软件需求,接着就是oa啊HR啊上下游管理啊等等. ...