JavaScript实现放大镜效果代码示例

2024-10-10 18:20:26

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>
  <style>
    .smallBgImg {
      width: 350px;
      height: 350px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      background-clip: padding-box;
      float: left;
      position: relative;
      cursor: pointer;
    }

    .move {
      border: 1px solid #ccc;
      box-sizing: border-box;
      background: rgba(165, 201, 66, 0.5);
      position: absolute;
      left: 0;
      top: 0;
    }

    .bigBgImg {
      width: 540px;
      height: 540px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      background-clip: padding-box;
      float: left;
      margin-left: 10px;
    }

    .hidden {
      display: none;
    }
  </style>
</head>

<body>
  <div class="smallBgImg">
    <div class="move hidden">

    </div>
  </div>
  <div class="bigBgImg hidden">

  </div>
  <script>
    (function () {
      //基本信息配置
      var config = {
        smallImg: "./image/smallImg.jpg", //小图路径
        smallDom: document.getElementsByClassName("smallBgImg")[0], //小图 dom对象
        bigImg: "./image/bigImg.jpg", //大图路径
        bigDom: document.getElementsByClassName("bigBgImg")[0], //大图 dom对象
        moveDom: document.getElementsByClassName("move")[0], //移动方块的dom对象
        smallSize: { //小图尺寸
          width: 350,
          height: 350
        },
        bigSize: { //大图尺寸
          width: 800,
          height: 800
        },
        divBigSize: { //大图框的尺寸
          width: 540,
          height: 540
        }
      };
      //根据比例尺计算移动框的宽高 移动框/小图尺寸 = 大框尺寸/大图尺寸
      config.moveSize = {
        width: config.divBigSize.width * config.smallSize.width / config.bigSize.width,
        height: config.divBigSize.height * config.smallSize.height / config.bigSize.height
      };
      //小图style的计算值
      config.smallComputedStyle = window.getComputedStyle(config.smallDom);
      //大图style的计算值
      config.bigComputedStyle = window.getComputedStyle(config.bigDom);
      //移动方块style的计算值
      config.moveComputedStyle = window.getComputedStyle(config.moveDom);

      initSmallImg();
      initBigImg();
      initMoveDiv();

      //初始化小图
      function initSmallImg() {
        config.smallDom.style.background = `url("${config.smallImg}") no-repeat left top/contain`; //设置背景图片
        config.smallDom.onmousemove = function (e) { //鼠标移入事件
          //展示移动小块
          config.moveDom.style.display = "block";
          var move = window.getComputedStyle(config.moveDom);
          //获取鼠标在小图中的坐标
          var position = getPosition(e);
          //设置移动框的位置
          setPosition(position);

          //展示大图框
          config.bigDom.style.display = "block";
          //大图框中展示部分大图
          displayBigBgImgSize();
        }

        config.smallDom.onmouseout = function () {
          //移动小块隐藏，大图隐藏
          config.moveDom.style.display = config.bigDom.style.display = "none";
        }
      }

      //初始化大图
      function initBigImg() {
        config.bigDom.style.background = `url("${config.bigImg}") no-repeat`; //设置背景图片
      }

      //初始化移动框
      function initMoveDiv() {
        config.moveDom.style.width = config.moveSize.width + "px";
        config.moveDom.style.height = config.moveSize.height + "px";
      }

      //获取鼠标的坐标位置
      function getPosition(e) {
        if (e.target == config.smallDom) { //若鼠标出现在小图中,事件源是小图
          return { //直接获取鼠标距离事件源的横坐标和纵坐标
            x: e.offsetX,
            y: e.offsetY
          };
        } else { //鼠标出现在移动框中,事件源是移动框
          return {
            x: e.offsetX + parseFloat(config.moveComputedStyle.left) +
              1, //鼠标距离事件源的横坐标 + 事件源在smallDom中的left值 + 边框值
            y: e.offsetY + parseFloat(config.moveComputedStyle.top) +
//鼠标距离事件源的纵坐标 + 事件源在smallDom中的top值 + 边框值
          }
        }
      }

      //设置移动方块的位置
      function setPosition(position) {
        //鼠标要始终在移动方块中央位置
        config.moveDom.style.left = position.x - parseFloat(config.moveComputedStyle.width) / 2 + "px";
        config.moveDom.style.top = position.y - parseFloat(config.moveComputedStyle.height) / 2 + "px";

        //要限制移动框的范围在小图中，否则会超出小图
        var left = parseInt(config.moveComputedStyle.left);
        var top = parseInt(config.moveComputedStyle.top);
        if (left < 0) { //最左
          config.moveDom.style.left = "0px";
        }
        if (left > config.smallSize.width - config.moveSize.width) { //最右
          config.moveDom.style.left = config.smallSize.width - config.moveSize.width + "px";
        }
        if (top < 0) { //最上
          config.moveDom.style.top = "0px";
        }
        if (top > config.smallSize.height - config.moveSize.height) { //最下
          config.moveDom.style.top = config.smallSize.height - config.moveSize.height + "px";
        }
      }

      //展示部分大图
      function displayBigBgImgSize() {

        //移动框的left/小图width = 大图框的left/大图width
        var moveLeft = parseInt(config.moveComputedStyle.left);
        var moveTop = parseInt(config.moveComputedStyle.top);
        config.bigDom.style.backgroundPosition =
          `-${moveLeft*config.bigSize.width/config.smallSize.width}px -${moveTop*config.bigSize.height/config.smallSize.height}px`;
      }
    }());
  </script>
</body>

</html>

index.html

效果展示：

代码中的大图片和小图片要自己找，并且替换掉代码中的图片路径。

做放大镜效果做重要的一点是，要找到黄色移动块、小图、部分大图、大图，这四个之间的比例尺

黄色移动块 /小图 = 部分大图 / 大图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JS与CSS3实现图片响应鼠标移动放大效果示例

本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果.分享给大家供大家参考,具体如下: 今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果如下. 方法一:使用js和css3 效果如图: 这样的实现非常简单,就是利用js的mouseover和 mouseout事件,但是不知道如何使图片从中间放大,日后再行尝试吧,代码如下: <!DOCTYPE html> <html> <head> <title>网易图片动画</
hammer.js实现图片手势放大效果

本文实例为大家分享了hammer.js实现图片手势放大效果的具体代码,供大家参考,具体内容如下 //图片手势放大 var reqAnimationFrame = (function() { return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var el = $('img');
JS点击缩略图整屏居中放大图片效果

需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大的图片进行居中显示和点击别的地方隐藏已显示的大图的时候,才发现实现起来有难度. 1 第一张点击图片将图片放大下面将这种方式也贴出来,供自己参考(万一有需要的小伙伴正好需要这样的功能呢): <div> <img class="dialog" src="xxx.j
JavaScript实现图片放大镜效果

本文实例为大家分享了js实现图片放大镜效果的具体代码,供大家参考,具体内容如下 1.结构布局HTML代码 <div class="leftcon" id="left"> <img src="~/Content/images/风景-1.jpg" /> <div class="slide_box" id="box"></div> </div> <
原生js实现淘宝放大镜效果

大家经常逛淘宝.天猫.京东这类网站的时候往往会看到一些图片展示的效果,例如:把鼠标放在图片上右侧会出现一个放大的预览区域,这就是所谓放大镜效果.今天闲着没事干,就打算复习一下JavaScript基础,用一下基础知识制作一个类似于淘宝的放大镜效果. 先说一下这个效果需要用到的一些基础知识: css相对定位:position:absolute: 鼠标移入移出以及移动事件:onmouseover.onmouseout.onmousemove,记住这些事件一般不会单个出现获取鼠标点击坐标:X轴:cli
简单实现js放大镜效果

本文实例为大家分享了js放大镜效果展示的具体代码,供大家参考,具体内容如下具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div,img{ margin:0; padding:0; } img{ display:bl
js实现点击图片在屏幕中间弹出放大效果

js实现点击图片在屏幕中间弹出放大效果效果图点击图片后关键代码 html <div> <img height="100" width="100" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg" class="pic"/> <img height="100" wid
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图片放大镜效果代码[代码比较简单]

#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op
vue3实现淘宝放大镜效果的示例代码

目录实现效果实现思路完成小图盒子.遮罩.大图盒子布局实现鼠标移动到小图盒子显示遮罩和大图盒子实现鼠标移动遮罩在小图盒子移动完整代码总结实现效果实现思路我们实现动图的淘宝放大镜的效果需要4步. 1.完成小图盒子.遮罩.大图盒子布局2.实现鼠标移动到小图盒子显示遮罩和大图盒子3.实现鼠标移动遮罩在小图盒子移动4.实现遮罩的移动范围不能超出小图盒子,且移动时带动大图图片移动完成小图盒子.遮罩.大图盒子布局我的布局小图盒子包裹图片.遮罩.大图盒子.小图盒子为相对定位.遮罩.大图盒
JavaScript实现流星雨效果的示例代码

目录演示技术栈源码首先建立星星对象让星星闪亮起来创建流星雨对象让流星动起来演示上一次做了一个雨滴的动画,顺着这种思维正好可以改成流星雨,嘿嘿我真是一个小机灵. 技术栈还是先建立画布 <body> <canvas id="stars"></canvas> </body> 画布标签我昨天讲过了.不知道的小伙伴可以去看看. 源码首先建立星星对象 //创建一个星星对象 var Star = function (){ this
Javascript 实现放大镜效果实例详解

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

如果表达式是字符串的形式,那么一般我们求值都会遇到很大的问题. 这里有一种直接调用JavaScript的方法来返回数值,无疑神器. 代码如下: package scc; import javax.script.ScriptEngine; import javax.script.ScriptEngineManager; import javax.script.ScriptException; public class Counter { public static void main(String
JavaScript实现放大镜效果

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

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

在开发应用过程中,客户端与服务端经常需要进行数据传输,涉及到重要隐私信息时,开发者自然会想到对其进行加密,即使传输过程中被"有心人"截取,也不会将信息泄露.对于加密算法,相信不少开发者也有所耳闻,比如MD5加密,Base64加密,DES加密,AES加密,RSA加密等等..可利用亦或,并,且,等进行简单加密. 示例代码中使用的^运算key=0x01,可自定义自己的规则.定义自己的运算,保证可逆数据不丢失即可.key也可定义,动态key. java代码 public static Stri
JavaScript+HTML5 canvas实现放大镜效果完整示例

本文实例讲述了JavaScript+HTML5 canvas实现放大镜效果.分享给大家供大家参考,具体如下: 效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas放大镜</title> <style> #copycanvas { border: 1px

JavaScript实现放大镜效果代码示例

相关推荐

随机推荐