PC端网页特效(交互,动画函数

offset元素偏移量

PC端网页特效(交互,动画函数_第1张图片
不带定位以body为准
PC端网页特效(交互,动画函数_第2张图片
在这里插入图片描述
在这里插入图片描述

offset和style的区别

PC端网页特效(交互,动画函数_第3张图片
行内:写在标签里 的

案例

PC端网页特效(交互,动画函数_第4张图片

PC端网页特效(交互,动画函数_第5张图片
案例
PC端网页特效(交互,动画函数_第6张图片
PC端网页特效(交互,动画函数_第7张图片
(可拖动)
PC端网页特效(交互,动画函数_第8张图片
PC端网页特效(交互,动画函数_第9张图片
怎么实现不左上角对齐呢

PC端网页特效(交互,动画函数_第10张图片
鼠标松开:

PC端网页特效(交互,动画函数_第11张图片
925jd放大镜

PC端网页特效(交互,动画函数_第12张图片
PC端网页特效(交互,动画函数_第13张图片

PC端网页特效(交互,动画函数_第14张图片
把鼠标在盒子内的坐标给遮盖层
让黄盒子网上往左走自己的一般,鼠标就在中间了

PC端网页特效(交互,动画函数_第15张图片
卡在小盒子里面:
PC端网页特效(交互,动画函数_第16张图片
PC端网页特效(交互,动画函数_第17张图片

按比例移动
PC端网页特效(交互,动画函数_第18张图片
PC端网页特效(交互,动画函数_第19张图片
PC端网页特效(交互,动画函数_第20张图片
PC端网页特效(交互,动画函数_第21张图片

元素可视区client

PC端网页特效(交互,动画函数_第22张图片
PC端网页特效(交互,动画函数_第23张图片

立即执行函数

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

PC端网页特效(交互,动画函数_第24张图片
作用:独立创建了一个作用域,里面变量都是局部变量,避免了命名冲突问题
PC端网页特效(交互,动画函数_第25张图片
dpr:物理像素比

PC端网页特效(交互,动画函数_第26张图片
PC端网页特效(交互,动画函数_第27张图片
PC端网页特效(交互,动画函数_第28张图片
后退后不能重新执行(弹出)
PC端网页特效(交互,动画函数_第29张图片

元素滚动scroll

返回实际内容的大小
PC端网页特效(交互,动画函数_第30张图片
PC端网页特效(交互,动画函数_第31张图片
PC端网页特效(交互,动画函数_第32张图片
案例

PC端网页特效(交互,动画函数_第33张图片
PC端网页特效(交互,动画函数_第34张图片
PC端网页特效(交互,动画函数_第35张图片
936--------------------------------------------------------------------------

PC端网页特效(交互,动画函数_第36张图片
PC端网页特效(交互,动画函数_第37张图片
面试题:

PC端网页特效(交互,动画函数_第38张图片

动画函数封装

PC端网页特效(交互,动画函数_第39张图片
PC端网页特效(交互,动画函数_第40张图片

封装函数

PC端网页特效(交互,动画函数_第41张图片
动画记得加定位

继续优化
调用一次就会开辟一个内存空间,且每次定时器的名字都一样
PC端网页特效(交互,动画函数_第42张图片
PC端网页特效(交互,动画函数_第43张图片

缓动动画

PC端网页特效(交互,动画函数_第44张图片
PC端网页特效(交互,动画函数_第45张图片
除不尽会到不了目标位置,所以尽量避免小数运算
在这里插入图片描述
加一个判断条件,防止后退时向上取整出错

PC端网页特效(交互,动画函数_第46张图片

添加回调函数
在这里插入图片描述
PC端网页特效(交互,动画函数_第47张图片
PC端网页特效(交互,动画函数_第48张图片
PC端网页特效(交互,动画函数_第49张图片
动画执行完才变色:回调
封装到JS里面
在这里插入图片描述
PC端网页特效(交互,动画函数_第50张图片
D6947网页轮播图

你可能感兴趣的:(PC端网页特效(交互,动画函数)