<!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. springmvc和spring的区别

    springmvc只是spring其中的一部分.spring 可以 支持 hibernate ,ibatis ,JMS,JDBC 支持事务管理, 注解功能,表达式语言,测试springmvc 就是一个 ...

  2. SQL server查找指定表的所有索引

    WITH tmp AS ( SELECT indexname = a.name , tablename = c.name , indexcolumns = d.name , a.indid FROM ...

  3. C# Timer定时器用法

    System.Timers.Timer timer1 = new System.Timers.Timer(); timer1.Elapsed += new System.Timers.ElapsedE ...

  4. 开博缘由 ， 可点下看看 http://www.cnblogs.com/jshare

    记录日常用中用到.遇到的问题 实现过程,仅供参考 不定时更新 ------------------- 之前看过一个文章,大概说的是开发和用到的过的代码,可以提取出一些代码片段,长时间下来,你会发现部分 ...

  5. 解决 客户端连接 mysql5.7 Plugin 'mysql_native_plugin' is not loaded错误

    进入mysql数据库,修改数据库的内容  1, use mysql; 2,update user set authentication_string=""  where User= ...

  6. Visual Studio 2015 安装笔记

  7. 安卓app开发-01-开发工具及环境配置

    安卓app开发-01-开发工具及环境配置 请大家根据推荐指数和自己的意愿选择 使用 Android Studio 1.可以使用 Android Studio 下载地址:http://www.andro ...

  8. 引入 Tinker 之后如何在 Debug 模式下开启 Instant Run

    在<Tinker + Bugly + Jenkins 爬坑之路>一文中讲了在接入 Tinker 之后,Jenkins 中的一些坑,由此,热修复算告一段落,但是,在直接 Run 模式运行时, ...

  9. c# winfrom 皮肤切换 控件 IrisSkin2.dll 使用

    在c#应用程序中使用IrisSkin2.dll美化界面 IrisSkin2.dll 下载地址:http://d.download.csdn.net/down/1694982/sgear 一.添加控件I ...

  10. jQuery 小案例

    用jquery实现  百度换肤的模式; <!DOCTYPE html> <html lang="en"> <head> <meta cha ...