JavaScript特效！动画原理以及轮播图的实现

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

1.offsetWidth和offsetHigh

• 作用：获取元素节点的宽和高
• 打印结果为纯数字，offsetWidth=width+padding×2+border×2；offsetHeight=height+padding×2+border×2；
• 背景颜色的设置：内容+填充物（内边框）；
• 表格边框颜色默认为黑色。

2. offsetTop和offsetLeft

• offsetLeft：距离父亲的padding-left的距离；
• offsetLeft优先级=行内样式style.left>父相子绝>系统默认；
• offsetLeft不可赋值，只可以出现在等式右边，style.left可以赋值，一般在等式左边；因此，一般用offsetLeft 和 offsetTop 获取值，用style.left 和 style.top 赋值

3.offsetParent

• 作用：检测祖先盒子有无定位，若有返回最近的那个盒子，否则返回body

4.动画

4.1 简单动画

• 原理：盒子未来位置=当前位置+步长
• 思路：设置1个按钮和盒子，设置点击事件，事件内设置一个定时器，改变左侧位置，代码如下：

div.style.left = div.offsetLeft + 100 + "px";

• parseInt(div.style.left):默认取整数部分，作用2：转化为10进制，parseInt(string, radix) string为字符串，radix为介于2-36之间的数。使用者告诉这个函数string（比如11）是radix（比如2）进制的。

4.2 匀速动画

• 原理与4.1节相同
• 思路：涉及一个封装的函数，输入盒子与目标距离，返回匀速动画效果。其中需要用到定时器设置
• 代码如下

 function animate(ele, target) {
   
        clearInterval(ele.timer);//清除定时器
        //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
        var speed = target > ele.offsetLeft ? 10 : -10;  
        ele.timer = setInterval(f