web学习笔记(二十七)PC端网页特效

简介: web学习笔记(二十七)PC端网页特效

1.元素偏移量offset

1.1什么是offset

       offset就是偏移量。offset系列有很多重要的属性需要我们进行记忆。我们使用offset系列相关属性可以得到该元素的位置(偏移)、大小等。

1.2offset系列常用属性 image.png 1.3offset总结

  • offset可以获得元素距离带有定位的父级元素的位置 。若父级元素都没有带定位,则返回距离body的距离。
  • offset返回的数值都是不带单位的。
  • 通过offset返回的宽度和高度都是元素自身的内容区加上左右边框border大小再加上左右内边距padding的总值,也是不带单位的。

1.4offset 与 style 区别

offset

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

style

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

2.元素可视区client

       client是客户端的意思,我们可以使用client的相关属性来获取可视区的相关信息。通过client的相关属性可以动态的得到改元素的边框大小、元素大小等。

client系列属性

image.png

3.元素滚动scroll

scroll是滚动的,我们使用scroll相关的属性可以动态获得元素的大小、滚动距离等。

scroll系列属性

image.png

4.总结

4.1三大系列总结

image.png

  • offset系列经常用于获得元素位置
  • client 经常用于获取元素大小 clientwidth clientHeight
  • scroll经常用于获取滚动距离scrollTop scrollLeft
  • 注意页面滚动的距离通过 window.pageXOffset 获得

4.2 mouseenter 和mouseover的区别

  • mouseover鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只会经过自身盒子被触发。
  • 两种都是鼠标移动到元素上会被触发,但是mouseenter不会冒泡(mouseleave也不会冒泡),mouseover会冒泡
相关文章
|
25天前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
34 1
|
28天前
|
XML JavaScript 前端开发
哇塞!Web 前端惊现 DOM 元素神操作,一场惊心动魄的网页变革,你准备好了吗?
【8月更文挑战第23天】在Web前端开发中,熟练操作DOM元素至关重要。DOM作为一种编程接口,将HTML/XML文档表示为节点树,便于使用JavaScript访问及修改文档内容与结构。
43 0
|
20天前
|
开发者 图形学 API
从零起步,深度揭秘:运用Unity引擎及网络编程技术,一步步搭建属于你的实时多人在线对战游戏平台——详尽指南与实战代码解析,带你轻松掌握网络化游戏开发的核心要领与最佳实践路径
【8月更文挑战第31天】构建实时多人对战平台是技术与创意的结合。本文使用成熟的Unity游戏开发引擎,从零开始指导读者搭建简单的实时对战平台。内容涵盖网络架构设计、Unity网络API应用及客户端与服务器通信。首先,创建新项目并选择适合多人游戏的模板,使用推荐的网络传输层。接着,定义基本玩法,如2D多人射击游戏,创建角色预制件并添加Rigidbody2D组件。然后,引入网络身份组件以同步对象状态。通过示例代码展示玩家控制逻辑,包括移动和发射子弹功能。最后,设置服务器端逻辑,处理客户端连接和断开。本文帮助读者掌握构建Unity多人对战平台的核心知识,为进一步开发打下基础。
42 0
|
27天前
|
缓存 运维 网络协议
一台新PC进行Web页面请求的历程:技术深度剖析
【8月更文挑战第24天】在当今数字化时代,当我们轻轻点击浏览器上的一个链接,背后其实经历了一场复杂而精妙的交互过程。本文将带您深入探索,从一台全新PC的角度出发,揭秘Web页面请求的全过程,展现这背后隐藏的技术奥秘。
28 0
|
28天前
|
前端开发 数据安全/隐私保护 开发者
热门聚焦!Web 前端 CSS 选择器 —— 解锁精美网页的密码,触动开发者心灵深处!
【8月更文挑战第23天】CSS 选择器是 Web 前端设计中的关键工具,用于精准定位和美化页面元素。主要包括:直观的元素选择器(如 `p`),灵活的类选择器(如 `.my-class`),唯一的 ID 选择器(如 `#unique-div`),以及可根据属性选择的属性选择器(如 `a[title]`)。此外,后代选择器(如 `div p`)、子选择器(如 `ul > li`)和相邻兄弟选择器(如 `h1 + p`)可用于更复杂的选择。通用选择器(如 `*`)则适用于所有元素。通过组合这些选择器,开发者能够创建出既复杂又美观的网页样式,提升用户体验。
27 0
|
28天前
|
前端开发 JavaScript 开发者
揭秘Web前端交互核心:掌握事件对象,让你的网页响应如丝般顺滑!
【8月更文挑战第23天】在Web前端开发中,事件处理是实现用户与网页互动的关键机制。JavaScript通过事件对象(Event Object)让开发者能捕捉并响应用户的动作,如点击或按键等。事件对象封装了事件的相关信息,在事件监听器触发时作为参数传递。本文首先介绍了事件对象的基础概念,接着详细探讨了常用属性和方法,包括`type`、`target`、`currentTarget`及`preventDefault()`等。并通过一个简单的示例展示了如何在事件处理函数中利用事件对象来获取事件类型、触发元素等信息,并演示了如何阻止默认行为。
26 0
|
2月前
|
Web App开发 前端开发 安全
2024年新一代WebOffice内嵌网页组件,Web网页在线编辑Word/Excel/PPT
WebOffice控件面临兼容性、用户体验和维护难题。随着浏览器更新,依赖插件的技术不再适用,如Chrome不再支持NPAPI和PPAPI。产品普遍不支持多版本Office并存,定制能力弱,升级复杂。猿大师办公助手提供了解决方案,它兼容多种浏览器,包括最新版和国产浏览器,不依赖插件,支持文档对比,具有丰富的功能和接口,兼容多种Office版本,允许源码级定制,提供终身技术支持,并实现静默在线升级。适用于多种行业和操作系统。
112 2
|
2月前
|
监控 JavaScript 前端开发
Web Vitals:提升网页用户体验的关键技术
【7月更文挑战第18天】Web Vitals 为开发者提供了一套全面而具体的性能优化指南,帮助开发者从多个维度提升网页的用户体验。通过关注 LCP、FID 和 CLS 等核心指标,并采取有效的优化策略,我们可以让网页加载更快、交互更流畅、视觉更稳定,从而赢得用户的青睐和信任。在未来的发展中,持续关注并优化 Web Vitals 指标将是提升网页用户体验的重要方向。
|
1月前
|
Web App开发 人工智能 iOS开发
灵办AI助手Chrome插件全面评测:PC Web端的智能办公利器
《灵办AI助手:Mac OS下的高效办公利器》 灵办AI助手是一款专为提升工作效率而设计的浏览器插件,适用于Chrome、Edge等主流浏览器,在Mac OS系统中表现尤其出众。本文将深入评测其核心功能,包括网页翻译、AI对话、AI阅读及代码辅助等,展示如何在实际工作中运用这些功能来提升效率。此外,文中还提供了详细的安装与设置指南,帮助读者轻松上手这款办公神器。无论你是学生、职场人还是开发者,灵办AI助手都能成为你提高生产力的理想选择。
77 0
|
1月前
|
移动开发 JavaScript Android开发
如何实用便捷的在本地真机调试WEB端HTML5网页
如何实用便捷的在本地真机调试WEB端HTML5网页