（五）PC端网页特效

[!TIP]
在前面学习了JS基础、DOM 和 BOM 的基本操作后，这部分主要学习这些知识的拓展应用。

1. 元素偏移量 offset 系列

1.1 offset 概述

offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小（宽度高度）
  • 注意：返回的数值都不带单位

offset 系列常用属性：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gdZdAs3h-1653226864470)(https://cdn.jsdelivr.net/gh/Hacker-C/Picture-Bed@main/JavaScript/offset1.33r96uboi540.jpg)]

1.2 offset 与 style 区别

1.2.1 offset

  • offset 可以得到任意样式表中的样式值
  • offset 系列获得的数值是没有单位的
  • offsetWidth 包含 padding+border+width
  • offsetWidth 等属性是只读属性，只能获取不能赋值
  • 所以，我们想要获取元素大小位置，用 offset更合适

1.2.2 style

  • style 只能得到行内样式表中的样式值
  • style.width 获得的是带有单位的字符串
  • style.width 获得不包含 padding 和 border 的值
  • style.width 是可读写属性，可以获取也可以赋值
  • 所以，我们想要给元素更改值，则需要用 style 改变

1.3 案例1：获取鼠标在盒子内部的坐标

1.3.1 分析

  1. 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。
  2. 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）
  3. 其次得到盒子在页面中的距离( box.offsetLeft, box.offsetTop)
  4. 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标
  5. 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件mousemove

1.3.2 代码

let box = document.querySelector(".box");
box.addEventListener("mousemove", function (e) {let x = e.pageX - box.offsetLeft;let y = e.pageY - box.offsetTop;this.innerHTML =  "鼠标距离盒子坐标是：(" +x + ", " + y + ")";
});

1.4 案例2：模态框拖拽

弹出框，我们也称为模态框。

  1. 点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。
  2. 点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。
  3. 鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。
  4. 鼠标松开，可以停止拖动模态框移动。

1.4.1 分析

  1. 点击弹出层，模态框和遮挡层就会显示出来 display:block;
  2. 点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none;
  3. 在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标
  4. 触发事件是鼠标按下 mousedown，鼠标移动 mousemove 鼠标松开 mouseup
  5. 拖拽过程: 鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了
  6. 鼠标按下触发的事件源是最上面一行，就是id 为 title
  7. 鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的位置。
  8. 鼠标按下，我们要得到鼠标在盒子的坐标。
  9. 鼠标移动，就让模态框的坐标设置为：鼠标坐标减去盒子坐标即可，注意移动事件写到按下事件里面。
  10. 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除

1.4.2 代码

[!TIP]
我用阿里云盘分享了「模态框拖拽案例」，你可以不限速下载，链接：https://www.aliyundrive.com/s/uQHM8DpTh5F

1.5 案例2：京东放大镜

[!TIP]
代码：我用阿里云盘分享了「04-京东放大镜效果」，你可以不限速下载

JavaScript-PC端网页特效相关推荐

  1. javaScript PC端网页特效

    PC端网页特效 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 2. 元素可视区 client 系列 2.1 立即执行函数 2.2 loa ...

  2. JavaScript—— PC 端网页特效

    目录 一.PC 端网页特效 1. 元素偏移量 offest 系列 1.1 offset 概述 1.2 offset 与 style 区别 案例:获取鼠标在盒子内的坐标 案例:模拟框拖拽 html cs ...

  3. JavaScript——PC端网页特效

    目录 一.元素偏移量offset系列 1. offset概述 2. 常见属性 3. offset与style区别 案例--鼠标在盒子内坐标 案例--拖动模态框 案例--京东放大镜 二.元素可视区cli ...

  4. 移动端、PC端 网页特效

    移动端网页特效 标题触屏事件 移动端浏览器兼容性较好,不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方.比如触屏事件 touch(也称触摸事件),A ...

  5. 05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列， 元素可视区 client 系列， 元素滚动 scroll 系列， 动画函数封装， 常见网页特效案例

    04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...

  6. JS PC端网页特效 （一）

    2022年7月27日 周三学习记录博客  学习进度:PC端网页特效(一).学习时长:6h. 目录 PC端网页特效 1.元素偏移量 offset 系列 1.1 offset 概述 1.2 offset ...

  7. PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装

      目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装 动画实现原理 简单动画函数封装 动画函数给不同元素记录不同定时器 缓动效果原理 动画函数多个目标值之间移动 缓动函 ...

  8. 【第五部分 | JS WebAPI】6：PC端网页特效与本地存储

    目录 | 概述 | PC端网页特效之三大系列 1-1 elementObj . offsetXXX 属性 1-2 elementObj . style 和 offset 的区别 1-3 案例:获取鼠标 ...

  9. JavaScript（五）-- PC 端网页特效

    目录 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 案例:获取鼠标在盒子内的坐标 案例分析 案例:模态框拖拽 案例分析 案例:仿京东放大 ...

  10. JavaScript核心-5. PC端网页特效

    一.元素偏移量 offset 系列 1. offset offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素 ...

最新文章

  1. Struts2后期(这框架目前正处于淘汰状态)
  2. SAP事业部内部互供
  3. 如何使用批处理添加网络打印机
  4. Hibernate懒加载
  5. 开源软件 许可证密钥_自由和开源软件-1中的重要许可证
  6. 【luogu P3627 [APIO2009]抢掠计划】 题解
  7. Java面试之设计模式七大原则
  8. ORA-01034:ORACLE not available问题的解决方法
  9. python源码剖析读书笔记总结_《Python源码剖析》读书笔记：内存垃圾回收
  10. js 对象数组追加元素
  11. android 设备实现定时重启（无root权限或已root）
  12. OpenGL编程指南（红宝书）第九版使用指南
  13. 01-【分析】神策系统的拆解与分析
  14. IMM将软件测试成熟度分为5个,软件测试成熟度模型
  15. wxpy将个人微信号变成微信聊天机器人
  16. PS中蒙版使用简单实例
  17. 计算机常见故障及排除方法,科学网—计算机常见故障和解决办法 - 李卓哲的博文...
  18. sql server技术知识
  19. 降维技术 （Dimensionality Reduction）
  20. Cy3花青素荧光染料,(CAS:146368-13-0 )

热门文章

  1. dell服务器卡在启动界面_戴尔最新bios设置图解 当电脑出现开机画面按F2进入
  2. chrome浏览器虚拟摄像头
  3. 计算机怎么打开隐藏的项目,展示win10系统怎么打开隐藏文件夹
  4. 数据结构学习——RBT（红黑树）以及实现Map和Set
  5. .net升级到4.0之后，出现;System.Windows, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798...
  6. 计算机窗口是什么意思解释,Windows电脑窗口是什么？关于电脑窗口的一些基础知识...
  7. MATLAB直接输出棋盘格标定板
  8. pandas 选取指定列
  9. firewall添加白名单_详解firewall的规则设置与命令(白名单设置)
  10. 【软件工程】第一、二章总结