关于js动画简单理解;

本文详细介绍了如何使用CSS的transition属性实现元素的平滑过渡效果,包括属性、时间、速度及延迟等参数的设置。同时,深入探讨了利用JS的client, offset, scroll系列属性进行元素位置操作的方法,如获取元素尺寸、位置和文档滚动状态,以及如何监听滚动和窗口大小变化事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、CSS样式提供了运动

过度的属性:transition

过度的属性值:attr  ,time  , liner  ,  delay;

值分别是:属性(css),花费的时间,变化的速度(默认匀速),delay延迟;

2、js提供的运动

元素的client  offset  scroll三个系列可以帮助js提供运动

clientWidth/clientHeight/clientTop/clientLeft

offsetWidth/offsetHeight/offsetTop/offsetLeft/offsetParent

scrollWidth/scrollHeight/scrollTop/ScorllLeft(可读可写)

知识点补充

1、获取浏览器的body是有兼容性的

var body=document.body||document.documentElement

2、scrollTop和scrollLeft的最小值为0

3、获取body整个文档的高

document.body.scrollHeight||docuement.documentElement.scrollHeight

4、获取body可视区的高

document.body.clientHeight||docuement.documentElement.clientHeight

5、window常用的两个事件

onscroll 当滚动条滚动的时候触发

onresize 当窗口尺寸发生改变的时候触发

转载于:https://www.cnblogs.com/qinlinkun/p/10054902.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值