动画
动画实现原理
核心原理: 通过定时器setInterval()不断移动盒子
实现步骤:
获取盒子当前位置
让盒子在当前位置加上n个移动像素
利用定时器不断重复这个操作
加一个结束定时器的条件...解决方法:
既然永远也到不了终点,那我们就将步长取整,而且是向上取整,向下取整一样是到不了终点的
现在呢我们又加了一个向后的按钮,盒子向前移动后再返回来:
我们会发现又有问题,回来的时候看似是停止了...于是我将代码再修改一下:
这样就完美啦
动画函数添加回调函数
回调函数原理: 函数可以作为一个参数.将这个参数作为参数传入到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调...回调函数的位置: 定时器结束的位置
为了方便使用,我们直接将函数封装在文件中
动画函数封装到单独的JS文件中
因为以后经常使用这个动画函数,可以单独封装到一个JS文件里面,使用的时候引用这个文件即可...然后猝不及防的来了个案例,一个盒子在鼠标经过时滑动的案例:
先来看看结构:
样式:
JS:
今天结束,明天学习轮播图,洗漱洗漱上床休息了