JavaScript实现放大镜详细

2024-08-03 11:13:53

1、效果图

2、实现原理

借助宽高等比例放大的两张图片，结合js中鼠标偏移量、元素偏移量、元素自身宽高等属性完成；左侧遮罩移动Xpx,右侧大图移动X*倍数px；其余部分就是用小学数学算一下就OK了。

HTML和CSS：

 <divclass="wrap">
    <!-- 小图与遮罩 -->
    <div id="small">
      <img src="img/1.jpg" alt="" >
      <div id="mark"></div>
    </div>
    <!-- 等比例放大的大图 -->
    <div id="big">
      <img src="img/2.jpg" alt="" id="bigimg">
    </div>
  </div>

 * {
      margin: 0;
      padding: 0;
    }
    .wrap {
      width: 1500px;
      margin: 100px auto;
    }

    #small {
      width: 432px;
      height: 768px;
      float: left;
      position: relative;
    }

    #big {
      /* background-color: seagreen; */
      width: 768px;
      height: 768px;
      float: left;
      /* 超出取景框的部分隐藏 */
      overflow: hidden;
      margin-left: 20px;
      position: relative;
      display: none;
    }

    #bigimg {
      /* width: 864px; */
      position: absolute;
      left: 0;
      top: 0;
    }

    #mark {
      width: 220px;
      height: 220px;
      background-color: #fff;
      opacity: .5;
      position: absolute;
      left: 0;
      top: 0;
      /* 鼠标箭头样式 */
      cursor: move;
      display: none;
    }

// 获取小图和遮罩、大图、大盒子
    var small = document.getElementById("small")
    var mark = document.getElementById("mark")
    var big = document.getElementById("big")
    var bigimg = document.getElementById("bigimg")
    // 在小图区域内获取鼠标移动事件;遮罩跟随鼠标移动
    small.onmousemove = function (e) {
      // 得到遮罩相对于小图的偏移量(鼠标所在坐标-小图相对于body的偏移-遮罩本身宽度或高度的一半)
      var s_left = e.pageX - mark.offsetWidth / 2 - small.offsetLeft
      var s_top = e.pageY - mark.offsetHeight / 2 - small.offsetTop
      // 遮罩仅可以在小图内移动，所以需要计算遮罩偏移量的临界值（相对于小图的值）
      var max_left = small.offsetWidth - mark.offsetWidth;
      var max_top = small.offsetHeight - mark.offsetHeight;
      // 遮罩移动右侧大图也跟随移动（遮罩每移动1px，图片需要向相反对的方向移动n倍的距离）
      var n = big.offsetWidth / mark.offsetWidth
      // 遮罩跟随鼠标移动前判断：遮罩相对于小图的偏移量不能超出范围，超出范围要重新赋值（临界值在上边已经计算完成：max_left和max_top）
      // 判断水平边界
      if (s_left < 0) {
        s_left = 0
      } else if (s_left > max_left) {
        s_left = max_left
      }
      //判断垂直边界
      if (s_top < 0) {
        s_top = 0
      } else if (s_top > max_top) {
        s_top = max_top
      }
      // 给遮罩left和top赋值（动态的？因为e.pageX和e.pageY为变化的量），动起来！
      mark.style.left = s_left + "px";
      mark.style.top = s_top + "px";
      // 计算大图移动的距离
      var levelx = -n * s_left;
      var verticaly = -n * s_top;
      // 让图片动起来
      bigimg.style.left = levelx + "px";
      bigimg.style.top = verticaly + "px";
    }
    // 鼠标移入小图内才会显示遮罩和跟随移动样式，移出小图后消失
    small.onmouseenter = function () {
      mark.style.display = "block"
      big.style.display= "block"
    }
    small.onmouseleave = function () {
      mark.style.display = "none"
      big.style.display= "none"
    }

3、总结

鼠标焦点一旦动起来，它的偏移量就是动态的；父元素和子元素加上定位后，通过动态改变某个元素的left和top值来实现“动”的效果。
大图/小图=放大镜（遮罩）/取景框
两张图片一定要等比例缩放

到此这篇关于js实现放大镜详细的文章就介绍到这了,更多相关js实现放大镜内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

javaScript实现放大镜特效

要实现的效果:鼠标放到小图片上小图片上方会出现一个小块,这个小块里面的区域会放大显示到右边大图里面(如下图所示) 这个效果主要用到的是:鼠标的坐标e.clientX,e.clientY,偏移量offsetLeft,offsetTop,offsetWidth,sffsetHeight等属性. HTML和CSS代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&
JavaScript仿京东放大镜效果

本文实例为大家分享了JavaScript实现京东放大镜效果的具体代码,供大家参考,具体内容如下案例分析整个案例可以分为三个功能模块鼠标经过小图片盒子, 黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能黄色的遮挡层跟随鼠标功能. 移动黄色遮挡层,大图片跟随移动功能. 鼠标经过小图片盒子, 黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能就是显示与隐藏移动黄色遮挡层,大图片跟随移动功能,大图片的移动距离要跟黄色遮挡层的比例相等. 求大图片的移动距离公式代码 <!DOCTYP
JavaScript面向对象实现放大镜案例

本文实例为大家分享了JavaScript面向对象实现放大镜的具体代码,供大家参考,具体内容如下效果图实现原理分析如图所示触发鼠标的移动事件时,根据事件对象的 clientX 和 clientY 属性得到实时的坐标点 x 和 y 值 ,减去 small_box 的 offsetLeft 值和 cutting_box 的宽度的一半 ,可以得到 cutting_box 的偏移量 left 值,top值同理.当 cutting_box 到达右侧和下侧时,left 和 top 取得最大值.用实
Javascript实例项目放大镜特效的实现流程

目录前言案例:仿京东放大镜效果 offset系列 client系列 scroll系列三大系列总结前言本票博客主要是放大镜案例,里面涉及到的知识点会提出来,可放心食用~后有源代码. 案例:仿京东放大镜效果效果见下图: 功能要求: 当鼠标移动到小图片上时,遮罩层出现,同时旁边大图片也出现,鼠标移出,遮罩层消失,大图片也消失. 遮罩层只能在小盒内子移动,不能超出. 遮罩层在小盒子内移动,大图片显示对应的板块. 案例分析: 元素的隐层和显示遮罩层的移动范围用offset计算计算出大盒子内
JavaScript仿淘宝放大镜效果

本文实例为大家分享了JavaScript实现淘宝放大镜效果的具体代码,供大家参考,具体内容如下 html代码 <div class="thumbnail"> <img src="./img/12-1Z930152149 (2).jpg" alt=""> <div class="magnifier"></div> </div> <div class="o
JavaScript仿京东放大镜特效

本文实例为大家分享了JavaScript仿京东放大镜的具体代码,供大家参考,具体内容如下功能需求: 1.分为三个模块 2.鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开隐藏两个盒子功能 3.黄色的遮挡层跟随着鼠标移动 4.移动黄色遮挡层,大图片跟随着移动大图片移动距离=(遮挡层移动距离*大图片最大移动距离)/ 遮挡层最大移动距离 <style> body, div { margin: 0; padding: 0; } .product { position: relative; w
js实现放大镜效果的思路与代码

本文实例为大家分享了js实现放大镜效果的具体代码,供大家参考,具体内容如下样式展示: 思路先准备两张图片,一张小图,一张大图,并且两张图片有一个整数比值在小图片的上方设置一个放大镜样式,背景设为透明色即可大图片外边套一个父元素,超出父元素隐藏,大小为只能容纳你的放大部分即可父元素与放大镜样式的比值=大图与小图的比值在小图片上进行鼠标移动时获取鼠标的坐标,得到鼠标当前处于小图片上的坐标根据对应的比例求出大图片的坐标并移动大图片令放大部分处于父元素可见范围代码 1.html部分 <d
JavaScript实现放大镜效果

本文实例为大家分享了JavaScript实现放大镜效果的具体代码,供大家参考,具体内容如下这次实现的效果如下: 这次的案例稍微有一点难度,在css和js上都需要多加思考,话不多说,让我们来开始吧~ 1.首先我们需要使用html和css规划好整体的布局,即两个相邻的盒子A和B,左边的盒子A中还有一个小盒子S.为了实现相邻,我采用的方法是为其均设置position:absolute ,然后设置left和top的值来使其相邻. 小盒子S我们同样可以为其设置position:absolute,调整一下
JavaScript实现放大镜详细

目录 1.效果图 2.实现原理 3.总结 1.效果图 2.实现原理借助宽高等比例放大的两张图片,结合js中鼠标偏移量.元素偏移量.元素自身宽高等属性完成:左侧遮罩移动Xpx,右侧大图移动X*倍数px:其余部分就是用小学数学算一下就OK了. HTML和CSS: <divclass="wrap">  <div id="small"> <img src="img/1.jpg" al
Javascript 实现放大镜效果实例详解

Javascript 实现放大镜效果今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的放大镜效果效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个很好的思路就是,展示区是一小块可视区域,给他一个图片,超出可视区域的部分设为隐藏,有了这个思路,这个效果就能够很好的实现了,先看一下HTML结构! <div id="pic_wrap"> <div id="floa
JavaScript实现放大镜效果代码示例

JavaScript实现放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&
基于javascript实现放大镜特效

本文实例为大家分享了javascript实现放大镜特效的具体代码,供大家参考,具体内容如下我们在逛pc端商城时,鼠标放到商品上经常会看到一个类似放大镜效果的蒙层, <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0px;
javascript实现放大镜功能

本文实例为大家分享了javascript实现放大镜功能的具体代码,供大家参考,具体内容如下描述:当鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置, 使放大镜的移动方向与大图的水平和垂直方向相反如何设计页面元素技术要点:事件捕捉和定位难点:计算涉及技术 onmouseover:当鼠标指针移动到指定的对象上时发生 onmouseout:鼠标指针移出指定对象时发生 onmousemove:鼠标指针移动时发生 offsetLeft | offsetTop | offsetWidth |
JavaScript执行机制详细介绍

目录 1.进程与线程的概念 2.浏览器原理 3.同步与异步 4.执行栈与任务队列 5.事件循环(Event-Loop) 6.定时器前言: 不论是工作还是面试,我们可能都经常会碰到需要知道代码的执行顺序的场景,所以打算花点时间彻底搞懂JavaScript的执行机制. 想要搞懂JavaScript执行机制,你需要清楚下面这些知识: (以浏览器环境为例,与Node环境不同) 1.进程与线程的概念浏览器原理事件循环(Event-Loop),任务队列(同步任务,异步任务,微任务,宏任务) 进程与线程
HTML+CSS+JavaScript实现放大镜效果

本文实例为大家分享了HTML+CSS+JavaScript实现放大镜效果的具体代码,供大家参考,具体内容如下效果演示 JS 详解 HTML 和 CSS 部分放在了文章最后的源代码中,这里只对 JS 部分进行详解! 首先,需要获取操作的对象: 图片展示框(鼠标移入事件) 放大镜(显示和跟随鼠标) 放大镜中的图片(改变位置) let imgShow = document.querySelector('.img-show'); // 图片展示框 let imgLarge = document.qu
奇妙的Javascript图片放大镜

在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜.现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果. 制作思路:"放大镜"后有一幅背景图,它是"放大了"的图的原本.我们通过移动"放大镜"时适当调整背景图的位置,使它显示的刚好是需要要放大的部分. 效果演示: (点这里在新窗口中查看) 制作步骤: 1)先准备两幅内容相同尺寸不同的图片,这里我们找了一个400×300像素的缩略图small_hill.gif,一
使用纯javascript实现放大镜效果

jd或者淘宝的具体商品有个放大镜的效果.虽然网上类似插件琳琅满目,应用到项目上有诸多不便,自己抽点时间自己写了个类似插件,积累下代码,何乐而不为呢!!let'go: 打算把此特效封装成个插件,先把最基本的算法实现,然后再一步步封装吧: 最终实现效果: html 代码: 复制代码代码如下: <div id="Magnifier"></div> css 代码: 复制代码代码如下: <style> * { mar

JavaScript实现放大镜详细

目录

1、效果图

2、实现原理

3、总结

相关推荐

随机推荐