<!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. jQuery全能图片滚动插件

    插件开发背景 随着前端开发领域越来越受到重视,前端开发也变得越来越火热.各种优秀的前端组件层出不穷.尤其是jQuery插件,很多前端组件都是基于jQuery开开发的. 图片滚动是前端开发中可以说是非常 ...

  2. sql With(NoLock),With(ReadPast)

    --------------- create table tmp1 ( id int primary key, name ) ) ----------- insert into tmp1(id,nam ...

  3. Esri大数据分析引擎GeoAnalytics Server部署经历

    系统架构 Base WebGIS 4Cores 16GB Spatiotemporal Data Store 32GB SSD Disk 足够大的空间 GA Server 4Cores 16GB 足够 ...

  4. 基于openlayers2军事标绘，开源

    1.其实各GIS公司.网络上 都会有提供 军事标绘的功能,如arcgis 的,超图的.mapgis的:但大多数是非开源.且收费的.2.在这里要感谢超图,超图开源了标绘扩展符号库,我这里使用的就是超图的 ...

  5. 自定义动画（仿Win10加载动画）

    一.源代码 源代码及demo 二.背景 先看看Win10的加载动画(找了很久才找到): CPA推广甲爪广告联盟满30日结 [点击进入] 甲爪广告联盟,提供各类高单价CPA广告 单价高 收益好 日付广告 ...

  6. Windows server 2008系统各类版本的优缺点比较,Windows2008系统标准版 企业版 数据中心版 WEB版等

    大家都知道Windows Server 2008 发行了多种版本,以支持各种规模的企业对服务器不断变化的需求.Windows Server 2008 有 5 种不同版本,另外还有三个不支持 Windo ...

  7. F5 IIS Log获取客户端源IP

    1.配置F5启用X-Forwarded-For方法: 1:Local Traffic-Profiles-Http-改"Insert XForwarded For"为Enable 2 ...

  8. August 11th 2017 Week 32nd Friday

    I can't give you the world, but I can give you my world. 我不能给你全世界,但是我的世界我可以全部给你. Maybe I can't give ...

  9. iOS 滑动比较

    对iOS手机进行滑动操作进行总结:1.mobile:scroll向下滚动整个屏幕driver.execute_script('mobile: scroll', {'direction': 'down' ...

  10. codeforces 12D Ball

    codeforces 12D Ball 这道题有两种做法 一种用树状数组/线段树维护区间最值,一种用map维护折线,昨天我刚遇见了一道类似的用STL维护折线的题目: 392D Three Arrays ...