PC端网页特效（交互，动画函数

最新推荐文章于 2021-06-02 23:45:39 发布

XiangChiZhaJi

最新推荐文章于 2021-06-02 23:45:39 发布

阅读量742

点赞数

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/XiangChiZhaJi/article/details/104234165

本文探讨了PC端网页的特效实现，包括offset元素偏移量、元素可视区client属性、元素滚动scroll行为以及动画函数的封装和缓动动画。讲解了offset与style的区别，如何实现元素坐标对齐，并介绍了立即执行函数的作用。同时，文章还涉及到了网页轮播图的相关知识。

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

offset元素偏移量

在这里插入图片描述
不带定位以body为准

offset和style的区别

在这里插入图片描述
行内：写在标签里的

案例

在这里插入图片描述

在这里插入图片描述
案例

（可拖动）

怎么实现不左上角对齐呢

在这里插入图片描述
鼠标松开：

在这里插入图片描述
925jd放大镜

在这里插入图片描述

在这里插入图片描述
把鼠标在盒子内的坐标给遮盖层
让黄盒子网上往左走自己的一般，鼠标就在中间了

在这里插入图片描述
卡在小盒子里面：

按比例移动
在这里插入图片描述

元素可视区client

在这里插入图片描述

立即执行函数

不需要调用，立马自己执行

在这里插入图片描述
作用：独立创建了一个作用域，里面变量都是局部变量，避免了命名冲突问题

dpr:物理像素比

在这里插入图片描述

后退后不能重新执行（弹出）

元素滚动scroll

返回实际内容的大小
在这里插入图片描述

案例

在这里插入图片描述

936--------------------------------------------------------------------------

在这里插入图片描述

面试题：

在这里插入图片描述

动画函数封装

在这里插入图片描述

封装函数

在这里插入图片描述
动画记得加定位

继续优化
调用一次就会开辟一个内存空间，且每次定时器的名字都一样
在这里插入图片描述

缓动动画

在这里插入图片描述

除不尽会到不了目标位置，所以尽量避免小数运算

加一个判断条件，防止后退时向上取整出错

在这里插入图片描述

添加回调函数
在这里插入图片描述

动画执行完才变色：回调
封装到JS里面

D6947网页轮播图

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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