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，一经查实，立即删除！

相关文章

前端入门（认识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…
阅读更多...
如何成为一名优秀的工程师下

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

身为工程师&#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…
阅读更多...
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 主轴对齐方式…
阅读更多...
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文件管理…
阅读更多...
【Redis 知识储备】冷热分离架构 -- 分布系统的演进（5）

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

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

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

垂直分库架构 简介出现原因架构工作原理技术案例架构优缺点 简介 数据库的数据被拆分, 数据库分布式存储, 分布式处理, 分布式查询, 也可以理解为分布式数据库框架 出现原因 单机的写库会逐渐会达到性能瓶颈, 需要拆分数据库, 数据表的数据量太大, 处理压力太大, 需要进行分…
阅读更多...
阿里云服务器可以干什么?阿里云服务器主要用途是干嘛的?

阿里云服务器可以干什么?阿里云服务器主要用途是干嘛的?

阿里云服务器可以干嘛&#xff1f;能干啥你还不知道么&#xff01;简单来讲可用来搭建网站、个人博客、企业官网、论坛、电子商务、AI、LLM大语言模型、测试环境等&#xff0c;阿里云百科aliyunbaike.com整理阿里云服务器的用途&#xff1a; 阿里云服务器活动 aliyunbaike.com…
阅读更多...
armlinux裸机-uart

armlinux裸机-uart

uart是一对一的串行异步全双工通信通信协议&#xff0c;串行速度较慢&#xff08;usart支持同步通信&#xff09; 传输原理 多个参数可以设置 为满足使用需求&#xff0c;我们一般都用带fifo缓冲中断。 我们使用S3C2440芯片&#xff0c;具体寄存器操作可以查看用户手册
阅读更多...
ES入门十四：分词器

ES入门十四：分词器

我们存储到ES中数据大致分为以下两种&#xff1a; 全文本&#xff0c;例如文章内容、通知内容精确值&#xff0c;如实体Id 在对这两类值进行查询的时候&#xff0c;精确值类型会比较它们的二进制&#xff0c;其结果只有相等或者不想等。而对全文本类型进行等值比较是不太实现…
阅读更多...
【深度学习】StableDiffusion的组件解析，运行一些基础组件效果

【深度学习】StableDiffusion的组件解析，运行一些基础组件效果

文章目录 前言vaeclipUNetunet训练帮助、问询 前言 看了篇文&#xff1a; https://zhuanlan.zhihu.com/p/617134893 运行一些组件试试效果。 vae 代码&#xff1a; import torch from diffusers import AutoencoderKL import numpy as np from PIL import Image# 加载模型…
阅读更多...
Redis分布式锁误删情况说明

Redis分布式锁误删情况说明

4.4 Redis分布式锁误删情况说明 逻辑说明&#xff1a; 持有锁的线程在锁的内部出现了阻塞&#xff0c;导致他的锁自动释放&#xff0c;这时其他线程&#xff0c;线程2来尝试获得锁&#xff0c;就拿到了这把锁&#xff0c;然后线程2在持有锁执行过程中&#xff0c;线程1反应过…
阅读更多...
Linux 命令完全手册(1)，受益匪浅

Linux 命令完全手册(1)，受益匪浅

第一列返回的是行数&#xff0c;第二列是字数&#xff0c;第三列则是比特数。 我们可以让它只计算行数&#xff1a; wc -l test.txt 或者只计算字数&#xff1a; wc -w test.txt 或者只计算比特数&#xff1a; wc -c test.txt 在 ASCII 字符集中&#xff0c;比特数等于字…
阅读更多...
python爬虫学习第十六天--------URLError和HTTPError、cookie登录、Handler处理器

python爬虫学习第十六天--------URLError和HTTPError、cookie登录、Handler处理器

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023