模态框与产品放大镜效果

最新推荐文章于 2022-10-06 22:43:05 发布
最新推荐文章于 2022-10-06 22:43:05 发布
阅读量81 收藏
点赞数
分类专栏： JavaScript学习笔记 文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51010474/article/details/124566898
版权

拖动模态框（弹出框）

案例分析：

  • 点击弹出层，模块框和灰色半透明的遮挡层就会显示出来 display：block；
  • 点击关闭按钮，模块框和灰色半透明的遮挡层就会隐藏出来 display：none；
  • 鼠标放到模块框最上面一行，可以按住鼠标拖拽模块框在页面中移动，触发的事件源是最上面一行，即id为title
  • 鼠标松开，可以停止拖动模态框移动
  • 在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标
  • 触发事件是鼠标按下mousedown、鼠标移动mousemove、鼠标松开mouseup
  • 拖拽过程：鼠标在移动过程中获得最新的值赋值给模态框的left和top值，这样模态框就会跟着鼠标走了
  • 鼠标的坐标 - 鼠标在盒子内的坐标 = 模态框真正的位置
  <head>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      a {
        text-decoration: none;
        color: #000;
      }

      .login {
        display: none;
        width: 512px;
        height: 280px;
        position: fixed;
        border: #ebebeb solid 1px;
        left: 50%;
        top: 50%;
        background: #fff;
        box-shadow: 0px 0px 20px #ddd;
        z-index: 9999;
        transform: translate(-50%, -50%);
      }

      .login-header {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        text-align: center;
      }

      .login-title {
        position: relative;
        width: 100%;
        margin: 10px 0px 0px 0px;
        text-align: center;
        line-height: 40px;
        height: 40px;
        font-size: 18px;
        cursor: move;
      }

      .login-title span {
        position: absolute;
        right: -20px;
        top: -30px;
        border: #ebebeb solid 1px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: #fff;
      }

      .login-input-content {
        margin-top: 20px;
      }

      .login-input {
        overflow: hidden;
        margin: 0px 0px 20px 0px;
      }

      .login-input input {
        float: left;
        line-height: 35px;
        height: 35px;
        width: 350px;
        border: #ebebeb 1px solid;
        text-indent: 5px;
        background-color: #fff;
      }

      .login-input label {
        float: left;
        width: 90px;
        padding-right: 10px;
        text-align: right;
        line-height: 35px;
        height: 35px;
        font-size: 14px;
      }

      .login-button {
        width: 50%;
        line-height: 40px;
        font-size: 14px;
        margin: 30px auto 0px auto;
        border: #ebebeb 1px solid;
        text-align: center;
      }

      .login-button a {
        display: block;
      }

      .login-bg {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background: rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="login-header">
      <a href="javascript:;" id="link">点击，弹出登录框</a>
    </div>
    <div class="login">
      <div id="title" class="login-title">
        登录会员
        <span
          ><a href="javascrip:;" id="closeBtn" class="close-login"
            >关闭</a
          ></span
        >
      </div>
      <div class="login-input-content">
        <div class="login-input">
          <label>用户名</label>
          <input type="text" placeholder="请输入用户名" class="list-input" />
        </div>
        <div class="login-input">
          <label>密码</label>
          <input
            type="passwords"
            placeholder="请输入登录密码"
            class="list-input"
          />
        </div>
      </div>
      <div id="loginBtn" class="login-button">
        <a href="javascript" id="login-button-submit">登录会员</a>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div id="bg" class="login-bg"></div>
    <script>
      // 1. 获取元素
      var link = document.querySelector("#link");
      var login = document.querySelector(".login");
      var closeBtn = document.querySelector("#closeBtn");
      var mask = document.querySelector(".login-bg");
      var title = document.querySelector("#title");
      // 2. 点击弹出层这个链接 link  让mask 和login 显示出来
      link.addEventListener("click", function () {
        login.style.display = "block";
        mask.style.display = "block";
        // 3. 点击 closeBtn 就隐藏 mask 和 login
        closeBtn.addEventListener("click", function () {
          login.style.display = "none";
          mask.style.display = "none";
        });
        // 4. 开始拖拽
        // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
        title.addEventListener("mousedown", function (e) {
          var x = e.pageX - login.offsetLeft;
          var y = e.pageY - login.offsetTop;
          // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
          document.addEventListener("mousemove", move);
          function move(e) {
            login.style.left = e.pageX - x + "px";
            login.style.top = e.pageY - y + "px";
          }
          // (3) 鼠标弹起，就让鼠标移动事件移除
          document.addEventListener("mouseup", function () {
            document.removeEventListener("mousemove", move);
          });
        });
      });
    </script>
  </body>
</html>

仿京东放大镜效果

案例分析：

整个案例分为3个功能模块

1、鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能

2、黄色的遮挡层跟随鼠标功能

  • 把鼠标坐标给遮挡层不合适，因为遮挡层坐标以父盒子为准
  • 首先是获得鼠标在盒子的坐标，之后把数值给给遮挡层做为left值和top值
  • 此时用到鼠标移动事件，但是还是在小图片盒子内移动
  • 发现遮挡层的位置不对（鼠标在遮挡层的顶点，要在遮挡层的中间），需要减去盒子自身的高度和宽度的一半
  • 遮挡层不能超出小图片盒子范围 如果小于0，就把坐标设置为0，如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
  • 遮挡层的最大移动距离：小图片盒子的宽度减去遮挡层盒子宽度

3、移动黄色遮挡层，大图片跟随移动功能

  • 求大图片的移动距离公式：遮挡层距离/遮挡层最大移动距离=大图片距离/大图片最大移动距离

detail.html

  <head>
    <link rel="stylesheet" href="detail.css" />
    <script src="detail.js"></script>
  </head>
  <body>
    <div class="w">
      <div class="preview_img">
        <img src="../image/s3.png" alt="" />
        <div class="mask"></div>
        <div class="big">
          <img src="../image/big.jpg" alt="" class="bigImg" />
        </div>
      </div>
    </div>
  </body>
</html>

detail.css

*{
    padding: 0;
    margin: 0;
}
.w {
	width: 1200px;
	margin: 0 auto;
}
.preview_img{
    position: relative;
    width: 398px;
    height: 398px;
    margin: 50px;
    border: 1px solid #ccc;
}
.preview_img img{
    vertical-align: middle;
}
.mask{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 298px;
    width: 298px;
    background-color: #FEDE4F;
    border: 1px solid #ccc;
    opacity: .5;
    cursor: move;
}
.big{
    display: none;
    position: absolute;
    top: 0;
    left: 410px;
    width: 498px;
    height: 498px;
    /* background-color: pink; */
    border: 1px solid #ccc;
    overflow: hidden;
}
.big img{
    position: absolute;
    left: 0;
    top: 0;
}

detail.js

window.addEventListener('load', function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
    preview_img.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function() {
            mask.style.display = 'none';
            big.style.display = 'none';
        })
        // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
    preview_img.addEventListener('mousemove', function(e) {
        // (1). 先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
        // (3) 我们mask 移动的距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // (4) 如果x 坐标小于了0 就让他停在0 的位置
        // 遮挡层的最大移动距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图
        var bigIMg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';
    })

})

fifi家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js网页设计案例
02-04
js详细的网页设计案列，各种网页效果，页面搜索，游戏，鼠标特效等
js 仿京东放大镜
不想起床
10-17 337
功能模块 整个案例可以分为三个功能模块 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能 黄色的遮挡层跟随鼠标功能。 移动黄色遮挡层，大图片跟随移动功能。 案例分析 黄色的遮挡层跟随鼠标功能。 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。 首先是获得鼠标在盒子的坐标。 之后把数值给遮挡层做为left 和top值。 此时用到鼠标移动事件，但是还...
js 放大镜案例
A951299034的博客
10-12 111
分析和解释都在代码行上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
js - 放大镜案例
lizixuan2001的博客
12-14 617
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>放.
JS案例之放大镜
X-77
11-08 1391
前言 本票博客主要是放大镜案例，里面涉及到的知识点会提出来，可放心食用~后有源代码。 案例：仿京东放大镜效果 效果见下图： 功能要求： 当鼠标移动到小图片上时，遮罩层出现，同时旁边大图片也出现，鼠标移出，遮罩层消失，大图片也消失。 遮罩层只能在小盒内子移动，不能超出。 遮罩层在小盒子内移动，大图片显示对应的板块。 案例分析： 元素的隐层和显示 遮罩层的移动范围用offset计算 计算出大盒子内移动的距离 案例代码： 首先咱们应该将结...
商品放大镜
01-02
放大镜效果通常由两部分组成：一个是原始图片，另一个是放大后的预览区域。当用户将鼠标移动到原始图片上时，预览区域会显示图片的放大版本。这种效果可以通过CSS和JavaScript联合实现，其中CSS主要负责布局和样式，...
JS产品图片局部放大特效代码
03-20
然后，将放大区域的图像数据绘制到放大镜的canvas元素或者通过CSS调整背景位置来实现放大效果。 4. **交互设计**：除了局部放大，此特效还提供了浏览完整大图的功能。当用户点击产品图片，可以弹出一个全屏或者模态...
4种JS图片放大缩小效果
12-20
4. **动态拖动放大镜效果** 这是一种高级的交互方式，类似于实体店铺中的放大镜，用户可以拖动一个放大镜图标在图片上移动，看到局部的高清放大效果。实现时，需要创建一个半透明的放大镜元素，通过JavaScript捕捉...
类似淘宝不宝贝图片详情放大展示效果
07-22
本项目主要探讨的是如何实现“类似淘宝不宝贝图片详情放大展示效果”，这是一种增强用户浏览体验的技术，通常包括图片预览、点击放大以及放大镜效果等组件。下面我们将详细解析这一功能的实现原理和关键技术。 首先...
js图片放大缩小效果 商品展示 三
12-27
Fancy Zoom是一个基于jQuery的图片放大插件，它提供了平滑的放大效果和可定制的选项，如放大镜的形状和大小，以及是否显示阴影等。通过这个插件，开发者可以快速地为网站添加专业的图片放大功能，而无需从零开始编写...
使用js实现放大镜效果案例
03-27
具体图片模块展示：例如商品图片鼠标放置展示更大的效果图 适用于购物网站或作品图展示的初级网站效果插入
用js实现放大镜的效果的简单实例
11-23
第一次发博客，还有点小激动，本人现在正在天津上大学，希望以后从事前端这一行业，学习的时间不长，写博客为了记录自己的学习过程和收获，当然也算是巩固。可能写的东西不会像大牛那样高大上，只是一些基本的内容，当然我也会收藏一些我认为好的，不错的文章（其实最主要是我能看懂。。。。）。我相信以后自己也能够写出高大上的东西。加油！ 废话说的有点多，说正事。前几天看了一段潭州教育的教学视频，其中的老师是用JQuery实现放大镜的效果（老师讲的是在是太慢，各种乱扯，跳着看的）。由于我还没有好好的学习过JQuery，但是那些基本的代码还是可以看懂的，所以就想拿现在正在学习的js练一下手，最后还是成功的实现了这个效
JavaScript 网页设计300例
01-15
JavaScript 网页设计300例 JavaScript 网页设计300例 JavaScript 网页设计300例
Js实现放大镜案例
Harlynn_的博客
10-21 307
Js实现放大镜案例 当鼠标放在图片上时，会在图片上出现遮罩层，同时在图片右面显示遮罩层覆盖处放大的图片，具体效果详见各大购物网站的页面 HTML和CSS代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
js放大镜实现（案例）
qq_59599812的博客
09-22 336
话不多说，直接上案例
JS实现放大镜案例
weixin_42943920的博客
01-02 549
放大镜案例 实现效果如下图所示： 第一步：结构分析 结构分析 1-一个大盒子 div.box 2-一个放中等图片的盒子 div.middleBox 一张中等图片 一个遮罩层 div.shade 3-一个放小图片的盒子 div.smallBox 两张小图片 4-一个放大图的盒子div.bigBox 结构代码： <div class="box"> <div class="middleBox"> <img src="../img/middle1.jpg" alt
放大镜
alone0116的博客
09-09 288
放大器在购物网站中很常用，京东，淘宝，都会用到放大器的相关知识，而本次博客将为大家介绍使用javascript编写放大器的例子。 注：本次使用的图片 基本图片：名称：iphone.jpg  宽：350像素 高：350像素                 放大图片：名称：iphone_big.jpg  宽：800像素 高：800像素                  下面是javascrip
JavaScript基础 - 经典案例4 -放大镜 (含公式)
最新发布
never_stop_study的博客
10-06 1057
JavaScript基础 - 经典案例4 -放大镜 (含公式)
js商品放大镜案例
weixin_41824429的博客
07-02 301
js商品放大镜案例 效果图： 左边是商品图片，右边是放大效果 代码：记得把图片路径换成自己的 <style> .con{ padding: 200px 0 0 200px; } .box{ width: 300px; box-sizing: border-box; position: relative; }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值