JS-PC/MOBILE技巧--PC

一、PC 端网页特效

1、元素偏移量 offset 系列

offset 概述

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

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

offset 系列常用属性:

offset系列属性作用
element.offsetParent返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
element.offsetTop返回元素相对带有定位元素的父元素上方的偏移
element.offsetLeft返回元素相对带有定位元素的父元素左边框的偏移
element.offsetWidth返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight返回自身包括padding、边框、内容区的高度，返回数值不带单位

示例：

<!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>* {margin: 0;padding: 0;}.father {position: relative;width: 200px;height: 200px;background-color: pink;margin: 150px;}.son {width: 100px;height: 100px;background-color: purple;margin-left: 45px;}.w {width: 200px;height: 200px;background-color: skyblue;margin: 0 auto 200px;padding: 10px;border: 15px solid red;}</style>
</head>
<body><div class="father"><div class="son"></div></div><div class="w"></div><script>var father = document.querySelector('.father');var son = document.querySelector('.son');console.log(father.offsetTop);console.log(father.offsetLeft);console.log(son.offsetLeft);var w = document.querySelector('.w');console.log(w.offsetWidth);console.log(w.offsetHeight);console.log(son.offsetParent);console.log(son.parentNode); // 返回父级（最近一级）</script>
</body>
</html>

结果：
在这里插入图片描述

offset 与 style 区别

offset

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

style

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

示例：

<!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>.box {width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div class="box" style="width: 200px;"></div><script>var box = document.querySelector('.box');console.log(box.offsetWidth);console.log(box.style.width);// box.offsetWidth = '300px'; // 不可以box.style.width = '300px';</script>
</body>
</html>

结果：
在这里插入图片描述

2、元素可视区 client 系列

client系列属性作用
element.clientTop返回元素上边框的大小
element.clientLeft返回元素左边框的大小
element.clientWidth返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位

示例：

<!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>div {width: 200px;height: 200px;background-color: pink;border: 10px solid red;padding: 10px;}</style>
</head>
<body><div></div><script>// 不包含边框var div = document.querySelector('div');console.log(div.clientWidth);</script>
</body>
</html>

结果：
在这里插入图片描述

3、元素滚动 scroll 系列

元素 scroll 系列属性
scroll系列属性作用
element.scrollTop返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight返回自身实际的高度，不含边框，返回数值不带单位
页面被卷去的头部

示例：

<!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>div {width: 200px;height: 200px;background-color: pink;border: 10px solid red;padding: 10px;overflow: auto;}</style>
</head>
<body><div>我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容</div><script>var div = document.querySelector('div');console.log(div.scrollHeight);console.log(div.clientHeight);// scroll滚动事件div.addEventListener('scroll', function() {console.log(div.scrollTop);})</script>
</body>
</html>

结果：
在这里插入图片描述

页面被卷去的头部兼容性解决方案

写法：

  1. 声明了 DTD，使用 document.documentElement.scrollTop
  2. 未声明 DTD，使用 document.body.scrollTop
  3. 新方法 window.pageYOffset 和 window.pageXOffset，IE9 开始支持
function getScroll() {return {left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0};
}
// 使用的时候 getScroll().left/top;

mouseenter 和 mouseover 的区别

mouseenter 鼠标事件
  • mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
  • 原因：mouseenter 不会冒泡
  • 搭配的 mouseleave 同样不会冒泡

示例：

<!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>.father {width: 300px;height: 300px;background-color: pink;margin: 100px auto;}.son {width: 200px;height: 200px;background-color: purple;}</style>
</head>
<body><div class="father"><div class="son"></div></div><script>var father = document.querySelector('.father');var son =document.querySelector('.son');father.addEventListener('mouseenter', function() {console.log(1);})</script>
</body>
</html>

4、动画函数封装

动画实现原理

核心原理：通过定时器 setInterval() 不断移动盒子位置

实现步骤：

  1. 获得盒子当前位置
  2. 让盒子在当前位置上加上一个移动距离
  3. 利用定时器不断重复这个动作
  4. 添加结束定时器的条件
  5. 注意此元素需要添加定位，才能使用 element.style,left

示例：

<!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>div {position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div></div><script>// 动画原理var div = document.querySelector('div');var timer = setInterval(function() {if (div.offsetLeft >= 400) {clearInterval(timer);}  div.style.left = div.offsetLeft + 5 + 'px';  }, 30);       </script>
</body>
</html>
动画函数简单封装

传递两个参数：动画对象和移动到的距离

示例：

<!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>div {position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;}span {position: absolute;left: 0;top: 200px;display: block;width: 150px;height: 150px;background-color: purple;}</style>
</head>
<body><div></div><span></span><script>function animate(obj, target) {var timer = setInterval(function() {if (obj.offsetLeft >= target) {clearInterval(timer);}  obj.style.left = obj.offsetLeft + 5 + 'px';  }, 30);  }var div = document.querySelector('div');var span =document.querySelector('span');animate(div, 300);animate(span, 200);</script>
</body>
</html>
动画函数给不同元素记录不同定时器

示例：

<!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>div {position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;}span {position: absolute;left: 0;top: 200px;display: block;width: 150px;height: 150px;background-color: purple;}</style>
</head>
<body><button>点击ABC才走</button><div></div><span>ABC</span><script>function animate(obj, target) {// 调用多次定时器解决方案clearInterval(obj.timer);obj.timer = setInterval(function() {if (obj.offsetLeft >= target) {clearTimeout(timer);}obj.style.left = obj.offsetLeft + 1 + 'px';}, 30);}var div = document.querySelector('div');var span = document.querySelector('span');var btn = document.querySelector('button');animate(div, 300);btn.addEventListener('click', function() {// 如果多次点击，移动速度会加快，原因是开了多重定时器animate(span, 200);})</script>
</body>
</html>
缓动效果原理

思路：

  1. 使盒子移动距离慢慢变小，即速度缓慢下降
  2. 核心算法：（目标值 - 现在的位置）/ 10 作为每次移动距离的步长
  3. 停止的条件：让当前盒子位置等于目标盒子的位置

示例：

<!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>span {position: absolute;left: 0;top: 200px;display: block;width: 150px;height: 150px;background-color: purple;}</style>
</head>
<body><button class="btn500">点击 ABC 到500</button><button class="btn800">点击 ABC 到800</button><span>ABC</span><script>function animate(obj, target) {// 调用多次定时器解决方案clearInterval(obj.timer);obj.timer = setInterval(function() {// 步长(正负取值)// var step = Math.ceil((target - obj.offsetLeft) / 10);var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {clearTimeout(timer);}obj.style.left = obj.offsetLeft + step + 'px';}, 15);}var span = document.querySelector('span');var btn500 = document.querySelector('.btn500');var btn800 = document.querySelector('.btn800');btn500.addEventListener('click', function() {animate(span, 500);})btn800.addEventListener('click', function() {animate(span, 800);})</script>
</body>
</html>
动函数添加回调函数

示例：

<!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>span {position: absolute;left: 0;top: 200px;display: block;width: 150px;height: 150px;background-color: purple;}</style>
</head>
<body><button class="btn500">点击 ABC 到500</button><button class="btn800">点击 ABC 到800</button><span>ABC</span><script>function animate(obj, target, callback) {// 调用多次定时器解决方案clearInterval(obj.timer);obj.timer = setInterval(function() {var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {clearTimeout(obj.timer);// 回调函数写在定时器停止条件里if (callback) {callback();}}obj.style.left = obj.offsetLeft + step + 'px';}, 15);}var span = document.querySelector('span');var btn500 = document.querySelector('.btn500');var btn800 = document.querySelector('.btn800');btn500.addEventListener('click', function() {animate(span, 500);})btn800.addEventListener('click', function() {animate(span, 800, function() {span.style.backgroundColor = 'red';});})</script>
</body>
</html>
动画函数封装到单独JS文件里面

示例：

<!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>.sliderbar {position: fixed;right: 0;bottom: 100px;width: 40px;height: 40px;text-align: center;line-height: 40px;cursor: pointer;color: #fff;}.con {position: absolute;left: 0;top: 0;width: 200px;height: 40px;background-color: purple;z-index: -1;}</style><script src="animate.js"></script>
</head>
<body><div class="sliderbar"><span>←</span><div class="con">问题反馈</div></div><script>var sliderbar = document.querySelector('.sliderbar');var con = document.querySelector('.con');sliderbar.addEventListener('mouseenter', function() {animate(con, -160, function() {// 执行完箭头方向更改sliderbar.children[0].innerHTML = '→';});})sliderbar.addEventListener('mouseleave', function() {animate(con, 0, function() {sliderbar.children[0].innerHTML = '←';});})</script>
</body>
</html>

JS 代码：

function animate(obj, target, callback) {// 调用多次定时器解决方案clearInterval(obj.timer);obj.timer = setInterval(function() {var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {clearTimeout(obj.timer);// 回调函数写在定时器停止条件里if (callback) {callback();}}obj.style.left = obj.offsetLeft + step + 'px';}, 15);
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/799083.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2024-04-07 问AI: 在深度学习中，预训练是什么？

2024-04-07 问AI: 在深度学习中，预训练是什么？

文心一言 在深度学习中&#xff0c;预训练&#xff08;Pre-training&#xff09;是一种模型训练的技术&#xff0c;主要目的是利用大量无标签或已标签的数据来初始化模型的参数&#xff0c;从而为后续的任务提供一个好的起点。这种技术可以帮助模型学习到数据的通用表示&#…
阅读更多...
前端入门（认识HTML，CSS，JavaScript三件套）

前端入门（认识HTML，CSS，JavaScript三件套）

目录 前言 HTML&#xff08;构建&#xff09; CSS&#xff08;设计&#xff09; JavaScript&#xff08;互动&#xff09; 总结 相关书籍推荐 前言 前端&#xff08;Frontend&#xff09;指的是与用户直接交互的部分&#xff0c;也称为客户端。在网站或者应用程序中&…
阅读更多...
特别详细的Spring Cloud 系列教程1：服务注册中心Eureka的启动

特别详细的Spring Cloud 系列教程1：服务注册中心Eureka的启动

Eureka已经被Spring Cloud继承在其子项目spring-cloud-netflix中&#xff0c;搭建Eureka Server的方式还是非常简单的。只需要通过一个独立的maven工程即可搭建Eureka Server。 我们引入spring cloud的依赖和eureka的依赖。 <dependencyManagement><!-- spring clo…
阅读更多...
【LeetCode热题100】【技巧】下一个排列

【LeetCode热题100】【技巧】下一个排列

题目链接&#xff1a;31. 下一个排列 - 力扣&#xff08;LeetCode&#xff09; 就是要找这堆数字的组合中下一个较大的数&#xff0c;比如1243的下一个排列是1342&#xff0c;那怎么得到的&#xff0c;就是把大数放前面小数放后面这个数自然就大了&#xff0c;如果要接近的大&…
阅读更多...
EXCEL学习笔记

EXCEL学习笔记

EXCEL学习笔记 小技巧 一键批量添加后缀名词/单词 单元格格式-自定义-通用格式后面输入相应的单位&#xff0c;比如“元”。 输入10000个序号&#xff0c;先输入1&#xff0c;点击开始-填充-序列&#xff0c;选中该列&#xff0c;终止值为10000&#xff1b; 按住shift选取多个…
阅读更多...
如何成为一名优秀的工程师下

如何成为一名优秀的工程师下

身为工程师&#xff0c;理所当然要重视实践&#xff0c;自然科学不管发展到何时都离不开实验。 电子学本身就是 为了指导工程实践。所以不要谈空洞的理论。现在很多毕业生都面临这样的问题&#xff0c;总是谈一些空洞的理论&#xff0c;甚至错误的但还不以为然的理论。实践可以…
阅读更多...
uniapp 密码框的眼睛

uniapp 密码框的眼睛

效果展示&#xff1a; uniapp input 官网链接&#xff1a;链接 按照官方文档&#xff0c;uni-icon出不来。 通过自己的方法解决了&#xff0c;解决方案如下&#xff1a; 代码&#xff1a; <uni-forms-item name"password"><inputclass"uni-input&quo…
阅读更多...
4月形势分析以及往后5-12月规划结论：完全超出预期的个人形势分析

4月形势分析以及往后5-12月规划结论：完全超出预期的个人形势分析

个人新形势的变化&#xff0c;甚至于超出了预期&#xff0c;完全超出了预期&#xff01; 导致&#xff0c;有些个人做事主动性跟不上情况的发生。如何解决&#xff1f; 也是重要头等重要的事情。因为如果心绪稳定不了&#xff0c;直接影响做事的效率&#xff0c;以及做事的质量…
阅读更多...
C语言正则表达式 regnext regreplace regreplaceAll

C语言正则表达式 regnext regreplace regreplaceAll

由于C语言的正则表达式API相对比较简易.默认API只有regcomp/regerror/regexec/regfree这些函数.相对于其他的高级语言中正则表达式所所能实现的功能(如:查找/替换)有所欠缺.所以想着自己写下一些需要的函数以备后续需要使用. #ifndef _E_REGEX_INCLUDE #define _E_REGEX_INCLU…
阅读更多...
Spring AI 来了，打造Java生态大模型应用开发新框架！

Spring AI 来了，打造Java生态大模型应用开发新框架！

Spring AI 来了&#xff0c;打造Java生态大模型应用开发新框架&#xff01; Spring AI 开发框架设计理念Spring AI 主要功能特性如下 Spring AI 应用开发案例案例一&#xff1a;基于大模型的对话应用开发案例二&#xff1a;RAG 检索增强应用开发案例三&#xff1a;Function Cal…
阅读更多...
15-1-Flex布局

15-1-Flex布局

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 Flex布局1 Flex容器和Flex项目2 Flex 容器属性2.1 主轴的方向2.2 主轴对齐方式…
阅读更多...
Linux ftpshut命令教程：如何优雅地关闭FTP服务器(附实例详解和注意事项)

Linux ftpshut命令教程：如何优雅地关闭FTP服务器(附实例详解和注意事项)

Linux ftpshut命令介绍 ftpshut命令是Linux系统中用于在指定的时间关闭FTP服务器的命令。这个命令提供了一个自动化的关闭程序&#xff0c;超级用户可以使用它来自动断开当前的proftpd连接&#xff0c;并拒绝新的连接。当服务器关闭后&#xff0c;会在/etc目录下生成一个名为s…
阅读更多...
vscode-插件开发-hello world-创建初始模板

vscode-插件开发-hello world-创建初始模板

参考vscode官方示例&#xff1a;如何创建你的第一个插件开发项目模板的步骤进行了下文操作。 目录 前言1.环境配置全局安装 yo, generator-code 2. 新建一个插件项目模板问题1: F5 按键无法启动launch.json调试(解决)问题1 描述:问题1: 找错误问题1: 可行的解决方案 3. 开发插…
阅读更多...
SpringBoot集成Redis快速入门Demo

SpringBoot集成Redis快速入门Demo

目录 1. Redis概述 2.下载安装 3. Spring-data-redis概述 4. 快速入门 4.1 创建工程 4.2 导入依赖 4.3 添加配置文件 4.4 添加Redis配置 4.5 添加Redis工具类 4.6 添加测试类 5. Demo下载地址 1. Redis概述 Redis&#xff08;Remote Dictionary Server 远程…
阅读更多...
ics-05-攻防世界

ics-05-攻防世界

题目 点了半天只有设备维护中心能进去 御剑扫一下 找到一个css 没什么用 再点击云平台设备维护中心url发生了变化 设备维护中心http://61.147.171.105:65103/index.php?pageindex试一下php伪协议 php://filter/readconvert.base64-encode/resourceindex.php base64解一下…
阅读更多...
华为海思校园招聘-芯片-数字 IC 方向 题目分享——第九套

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第九套

华为海思校园招聘-芯片-数字 IC 方向 题目分享&#xff08;有参考答案&#xff09;——第九套 部分题目分享&#xff0c;完整版获取&#xff08;WX:didadidadidida313&#xff0c;加我备注&#xff1a;CSDN huawei数字芯片题目&#xff0c;谢绝白嫖哈&#xff09; 单选 1&…
阅读更多...
(Git) gitignore基础使用

(Git) gitignore基础使用

文章目录 前言.gitignore 模式匹配注释 #转义 \直接匹配任意字符匹配 *单个字符匹配 ?目录分割 /多级目录 **范围匹配 []取消匹配 ! 检查是否生效父子文件END 前言 Git - gitignore Documentation (git-scm.com) 在使用git管理的项目中&#xff0c;可以通过.gitignore文件管理…
阅读更多...
go对象的创建和使用 orm map对象和List 时间 json get/post请求

go对象的创建和使用 orm map对象和List 时间 json get/post请求

1.对象的创建和使用 type Role struct {Id string json:"Id"RoleName string json:"RoleName"State uint json:"State" } var u new(Role) var role Role var data []Role structObj : Role{}2.对象和orm的使用 func TestSelectOn…
阅读更多...
【Redis 知识储备】冷热分离架构 -- 分布系统的演进（5）

【Redis 知识储备】冷热分离架构 -- 分布系统的演进（5）

冷热分离架构 简介出现原因架构工作原理技术案例架构优缺点 简介 引入缓存, 实行冷热分离, 将热点数据放到缓存中快速响应 (如存储到 Redis中) 出现原因 海量的请求导致数据库负载过高, 站点响应再读变慢 架构工作原理 多了缓存服务器, 对于热点数据全部到缓存中, 不常用数…
阅读更多...
【Redis 知识储备】垂直分库架构 -- 分布系统的演进（6）

【Redis 知识储备】垂直分库架构 -- 分布系统的演进（6）

垂直分库架构 简介出现原因架构工作原理技术案例架构优缺点 简介 数据库的数据被拆分, 数据库分布式存储, 分布式处理, 分布式查询, 也可以理解为分布式数据库框架 出现原因 单机的写库会逐渐会达到性能瓶颈, 需要拆分数据库, 数据表的数据量太大, 处理压力太大, 需要进行分…
阅读更多...
最新文章

Copyright @ 2022~2023