PC端网页特效异读

news2024/11/17 21:19:28

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.coloradmin.cn/o/1658055.html

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

相关文章

YOLOv9改进策略 | 添加注意力篇 | 一文带你改进GAM、CBAM、CA、ECA等通道注意力机制和多头注意力机制

一、本文介绍 这篇文章给大家带来的改进机制是一个汇总篇,包含一些简单的注意力机制,本来一直不想发这些内容的(网上教程太多了,发出来增加文章数量也没什么意义),但是群内的读者很多都问我这些机制所以单…

雷伴品鉴【神农式】倪琴 倪诗韵古琴

雷伴品鉴【神农式】倪琴 倪诗韵古琴 此琴材质为老杉木音色细腻,下指按弹舒适,手感极好漆面精美,线条流畅。

一文搞懂 ARM 64 系列: ADC

1 指令语法 adc <Xd>, <Xn>, <Xm> 2 指令语义 adc就是带「进位」加法&#xff0c;指令中的c就是英文carry。 整个指令等价于: (Xd, _) Xn Xm PSTATE.C 也就是将寄存器Xn&#xff0c;寄存器Xm&#xff0c;PSTATE中的「进位」标志相加&#xff0c;将相加的…

元素设置 flex:1,但是会被内部长单词宽度超出拉伸

初始布局如上图&#xff0c;left中是代码编辑器&#xff0c;实际上是个文本域&#xff0c;当输入长文本过长时&#xff0c;left宽度会被拉伸。 右侧容器被挤压。 解决方案&#xff1a;width&#xff1a;0&#xff1b; .left{flex:1; width:0} 当输入长文本过长时&#xff0c…

二分查找向下取整导致的死循环69. x 的平方根

二分查找向下取整导致的死循环 考虑伪题目&#xff1a;从数组arr中查找出目标元素target对应的下标&#xff0c;如果数组中不存在目标元素&#xff0c;找 到第一个元素值小于target的元素的下标。 编写二分查找算法如下&#xff1a; Testvoid testBinarySearch(){int[] arr n…

HackBar 新手使用教程(入门)

啥是Hackbar&#xff1f; Hackbar是一个Firefox 的插件,它的功能类似于地址栏,但是它里面的数据不受服务器的相应触发的重定向等其它变化的影响。 有网址的载入于访问,联合查询,各种编码,数据加密功能。 这个Hackbar可以帮助你在测试SQL注入,XSS漏洞和网站的安全性,主要是帮助…

车载测试___面试题和答案归纳

车载面试题 一、实车还在设计开发阶段&#xff0c;大部分测试通过什么测试&#xff1f; 答案&#xff1a;通过台架和仿真来完成的 二、测试部分划分&#xff1f; 测试部门是分为自研&#xff0c;系统&#xff0c;验收&#xff0c;自研部门是开发阶段测试&#xff0c;系统部门…

「网络流 24 题」餐巾计划【费用流】

「网络流 24 题」餐巾计划 思路 我们先建立超级源点 S S S 和超级汇点 T T T&#xff0c;对于每一天&#xff0c;我们将其拆分成两个点 A i A_i Ai​ 和 B i B_i Bi​&#xff0c;其中 A i A_i Ai​ 表示这一天实际消耗的餐巾&#xff0c;连边 S → ∞ A i S \stackrel{…

关于线程池,它的扩展问题你知道吗?(自己总结)

专门想一下为什么线程池不用Excutors&#xff0c;之前的印象是错的&#xff0c;居然还拿来面试里讲&#xff0c;惭愧&#xff0c;这里暂时整理俩小问题&#xff0c;其他的后续可能会更新。。 线程池是创建的越大越好嘛 #线程池创建的越大越好吗 Tip&#xff1a;2024-04-10 更…

车载测试系列:车载以太网测试(一)

汽车行业对可靠性和安全性要求越来越高&#xff0c;车载以太网在应用过程中&#xff0c;为了保证其可靠性与安全性&#xff0c;需要对其开展测试工作。 传统的以太网测试和车载以太网测试存在一定差异&#xff0c;传统以太网测试方法并不适用汽车以太网测试。 汽车行业对测试…

C++ 直接初始化 和 拷贝初始化 的区别

参考链接&#xff1a;https://www.jb51.net/article/54773.htm这篇文章主要介绍了C直接初始化与复制初始化的区别深入解析,是很多C初学者需要深入了解的重要概念,需要的朋友可以参考下https://www.jb51.net/article/54773.htm

Web3空投入门:如何增加空投成功的几率

今天分享空投如何避免限制以提高效率&#xff0c;增加成功几率&#xff0c;首先我们来了解什么是空投加密&#xff0c;有哪些空投类型。 一、什么是空投加密&#xff1f; 加密货币空投是一种营销策略&#xff0c;包括向用户的钱包地址发送免费的硬币或代币。 加密货币项目使用…

UE5 audio capture 回声问题 ||在安卓上有爆鸣声

参考视频 0.基本步骤 【UE4_蓝图】录制麦克风声音/系统声音并输出保存WAV文件_ue4录音-CSDN博客 1.步骤 1.创建Sound Submix A 2. 右键新建Sound Submix B 3.把B的两个参数调为-96 4.audio capture的Base Submix&#xff0c;把前面提到的A赋值进去 5.开始录制输出和完成录制…

云动态摘要 2024-05-09

给您带来云厂商的最新动态&#xff0c;最新产品资讯和最新优惠更新。 最新优惠与活动 [免费试用]即刻畅享自研SaaS产品 腾讯云 2024-04-25 涵盖办公协同、营销拓客、上云安全保障、数据分析处理等多场景 云服务器ECS试用产品续用 阿里云 2024-04-14 云服务器ECS试用产品续用…

Android虚拟机机制

目录 一、Android 虚拟机 dalvik/art&#xff08;6版本后&#xff09;二、Android dex、odex、oat、vdex、art区别 一、Android 虚拟机 dalvik/art&#xff08;6版本后&#xff09; 每个应用都在其自己的进程中运行&#xff0c;都有自己的虚拟机实例。ART通过执行DEX文件可在设…

C语言leetcode刷题笔记1

C语言leetcode刷题笔记1 第1题&#xff1a;136.只出现一次的数字两次遍历&#xff08;O(numsSize^2)&#xff09;位运算 第2题&#xff1a;202.快乐数快慢指针记录历史数据 第3题&#xff1a;53.最大子数组和暴力求解&#xff08;超时&#xff09;动态规划分治 第1题&#xff1…

C++语言·string类

1. 为什么有string类 C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数(strcpy,strcat)&#xff0c;但是这些库函数与字符串是分离开的&#xff0c;不太符合OOP(Object Oriented Programming面向对…

[力扣]——125.验证回文串

class Solution {public static boolean isValidChar(char ch){if((ch > a && ch < z) ||(ch > 0 && ch < 9)){return true;}return false;}public boolean isPalindrome(String s) {// 将大小写统一起来s s.toLowerCase();int left 0, right s…

248 基于matlab的GA-RBF神经网络预测

基于matlab的GA-RBF神经网络预测&#xff0c;遗传算法优化来训练RBF网络权值&#xff0c;RBF优化后的结果用于预测。输出真实值、RBF预测结果、GA-RBF预测结果&#xff0c;并进行对比。程序已调通&#xff0c;可直接运行。 248 RBF神经网络 GA-RBF 时间序列预测 - 小红书 (xiao…

信息收集篇 V1.1

零、 前言 0.1 话说 0.2 更新 0.3 致谢 一、 whois 1.1 常用在线收集whois信息站点&#xff1a; 1.2 查询企业的备案信息&#xff0c;主要的三种方式&#xff1a; 1.3 网站真实IP 1.4 旁站C端 二、 子域名 2.1 谷歌语法 2.2 第三方网站聚合了大量的DNS数据&#xff0c;…