PC端网页特效异读

pc网页特效

  • 一、三大系列
    • 1.元素偏移量(offset系列)
      • (1)一些属性
      • (2).offset和style的区别
      • (3).一些例子
    • 2.元素可视区(client系列)
      • (1).一些属性
      • (2).flexible.js源码分析
    • 3.scroll系列
    • (4).三大系列小结

其他,opacity是半透明的意思

一、三大系列

1.元素偏移量(offset系列)

一般用来动态获得元素位置和自身大小

(1)一些属性

在这里插入图片描述
在这里插入图片描述

(2).offset和style的区别

在这里插入图片描述

(3).一些例子

**获取鼠标在盒子内坐标
在这里插入图片描述

在这里插入图片描述
**模拟框拖拽
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.元素可视区(client系列)

获取边框大小,元素大小

(1).一些属性

前两个专门获得上、左边框的大小
后两个不包含边框
在这里插入图片描述

(2).flexible.js源码分析

1.立即执行函数
不需调用
创建了一个独立的作用域,避免命名冲突
里面的变量是局部变量
第二个括号是调用函数,可传递参数
在这里插入图片描述
2.pageshow,重新加载页面事件
给window添加
e.persissted返回的是true
在这里插入图片描述
用pageshow不用load的原因
在这里插入图片描述

3.scroll系列

常用来获取滚动宽度
内容的宽度高度
在这里插入图片描述
在这里插入图片描述
例子,淘宝右侧边栏
某元素上面被卷去的长度用element.scrollTop
整个页面用window.pageYOFFset
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
兼容性问题
在这里插入图片描述

(4).三大系列小结

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

libcity笔记:参数设置与参数优先级

1 参数优先级 高优先级的参数会覆盖低优先级的同名参数 Libcity中的优先级顺序维: 命令行参数(命令行python run_model.py时导入的) > 用户定义配置文件(命令行python run_model.py时由config_file导入的) >…

QT--4

QT 使用定时器完成闹钟 #include "widget.h" #include "ui_widget.h"void Widget::timestart() {timer.start(1000); }void Widget::timeend() {timer.stop(); }Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(t…

leetcode942.增减字符串匹配

题目描述&#xff1a; 由范围 [0,n] 内所有整数组成的 n 1 个整数的排列序列可以表示为长度为 n 的字符串 s &#xff0c;其中: 如果 perm[i] < perm[i 1] &#xff0c;那么 s[i] I 如果 perm[i] > perm[i 1] &#xff0c;那么 s[i] D 给定一个字符串 s &#x…

jsp 实验16 MVC 表白墙

源代码以及执行结果截图&#xff1a; ExpressWish_Bean.java package web; import java.util.HashMap; import java.util.ArrayList; import java.util.Iterator; public class ExpressWish_Bean { public HashMap<String,ExpressWish> wishList; ArrayList&…

神经网络结构的读取与可视化

torchsummary 要使用 Jupyter Notebook 绘制一个神经网络的结构图&#xff0c;可以使用 torchsummary 库中的 summary 函数。该函数可以显示模型的结构以及每一层的输出形状等信息。首先&#xff0c;确保你已经安装了 torchsummary&#xff1a; pip install torchsummary 然…

【ARM 嵌入式 C 字符串系列 23.6 -- 字符串转数值的函数实现】

请阅读【嵌入式开发学习必备专栏 】 文章目录 字符串转数值的函数实现代码实现 字符串转数值的函数实现 背景&#xff1a; 实现个函数首先判断是16进制数值字符串还是10进制数值字符串&#xff0c;如果是16进制数值字符串就将十六进制字符串转换为数值&#xff0c;例如将字符串…

图片公式识别@文档公式识别@表格识别@在线和离线OCR工具

文章目录 abstract普通文字识别本地软件识别公式扩展插件下载小结 在线识别网站/API&#x1f47a;Quicker整合(推荐)可视化编辑和识别公式其他多模态大模型识别图片中的公式排版 开源模型 abstract 本文介绍免费图片文本识别(OCR)工具,包括普通文字识别,公式识别,甚至是手写公…

C++ 类方法解析:内外定义、参数、访问控制与静态方法详解

C 类方法 类方法&#xff0c;也称为成员函数&#xff0c;是属于类的函数。它们用于操作或查询类数据&#xff0c;并封装在类定义中。类方法可以分为两种类型&#xff1a; 类内定义方法: 直接在类定义内部声明和定义方法。类外定义方法: 在类定义内部声明方法&#xff0c;并在…

2024面试自动化测试面试题【含答案】

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

每日Attention学习5——Multi-Scale Channel Attention Module

模块出处 [link] [code] [WACV 21] Attentional Feature Fusion 模块名称 Multi-Scale Channel Attention Module (MS-CAM) 模块作用 通道注意力 模块结构 模块代码 import torch import torch.nn as nnclass MS_CAM(nn.Module):def __init__(self, channels64, r4):super(…

Redis 的数据库管理

Redis 提供了⼏个⾯向 Redis 数据库的操作&#xff0c;分别是 dbsize、select、flushdb、flushall 命令&#xff0c; 我将介绍这些常见的命令。 切换数据库 select dbIndex许多关系型数据库&#xff0c;例如 MySQL ⽀持在⼀个实例下有多个数据库存在的&#xff0c;MySQL 可以…

SQL优化详解

目录 插入数据 insert的优化&#xff08;少量数据&#xff09; 批量插入 手动事务提交 主键顺序插入 插入大量数据 主键优化 数据组织方式&#xff1a; 页分裂&#xff1a; 主键顺序插入的方式&#xff1a; 主键乱序插入&#xff1a; 页合并&#xff1a; 主键设计…

docker常用操作

构建和打包 docker build 根据docker file 创建镜像 docker build -f -t docker save 将镜像打包 docker save -o <xxx.tar> 将打包的镜像加载成镜像&#xff0c;镜像名字不可改变&#xff01; docker load -i <xxx.tar> docker export 将容器打包 docker …

模板引擎Freemarker

什么是模板引擎 根据前边的数据模型分析&#xff0c;课程预览就是把课程的相关信息进行整合&#xff0c;在课程预览界面进行展示&#xff0c;课程预览界面与课程发布的课程详情界面一致。 项目采用模板引擎技术实现课程预览界面。什么是模板引擎&#xff1f; 早期我们采用的…

【有趣的透镜】1.透镜初相识

1.透镜的外形和材料 (1)透镜由玻璃或者塑料制成&#xff1b; (2)透镜一般为圆型&#xff0c;其单面或双面为球面&#xff1b; 2.透镜的类型和折射 (1)球面外凸为凸透镜(聚光)&#xff0c;球面内凹为凹透镜(散光)&#xff1b; (2)透镜是基于光的折射&#xff0c;只要光从一…

Linux的基本指令(下)

各位大佬好 &#xff0c;这里是阿川的博客 &#xff0c; 祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 这篇博客续博主的上篇博客Linux基本指令。 07 …

MATLAB 三维空间中在两点之间等间隔插入多个点 (67)

MATLAB 三维空间中在两点之间等间隔插入多个点 (67) 一、算法介绍二、算法实现1.代码2.结果一、算法介绍 用于加密直线点云,具体为根据给定的直线端点,沿着该直线方向,插入多个点,从而加密。具体方法和效果如下所示: 二、算法实现 1.代码 代码如下(示例): % 定…

flink kafka的enableCommitOnCheckpoints 和 enable.auto.commit 参数

背景 每次使用flink消费kafka消息的时候我就被这两个参数enableCommitOnCheckpoints 和 enable.auto.commit困扰&#xff0c;本文就来从源码看看这两个参数的作用 enableCommitOnCheckpoints 和 enable.auto.commit参数 1.FlinkKafkaConsumerBase的open方法&#xff0c;查看…

AcWing 1644. 二叉树中的最低公共祖先 题解 线性dp 倍增算法 前序中序构造二叉树

二叉树中的最低公共祖先 题目描述 树中两个结点 U 和 V 的最低公共祖先&#xff08;LCA&#xff09;是指同时具有 U 和 V 作为后代的最深结点。给定二叉树中的任何两个结点&#xff0c;请你找到它们的 LCA。 输入描述 第一行包含两个整数 M 和 N &#xff0c;分别表示询问结…

AlphaFold3: Google DeepMind的的新突破

AlphaFold 3的论文今天在Nature期刊发表啦!这可是AI在生物领域最厉害的突破的最新版本。AlphaFold-3的新招就是用扩散模型去"画出"分子的结构。它一开始先从一团模模糊糊的原子云下手,然后慢慢透过去噪把分子变得越来越清楚。 Alphafold3 我们活在一个从Llama和Sora那…