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

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

本文笔记基于「千古壹号」的GitHub项目：

文章目录

• 1.offsetWidth和offsetHigh
• 2. offsetTop和offsetLeft
• 3.offsetParent
• 4.动画
• • 4.1 简单动画
  • 4.2 匀速动画
• 5.轮播图
• • 5.1 需求1：鼠标放在索引上跳转到对应图
  • 5.2 需求2：自动播放
  • 5.3 需求3：放置鼠标呈现箭头，离开消失
  • 5.4 需求4：左右切换图片

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 和 p 赋值

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(function () {//在执行之前就获取当前值和目标值之差var val = target - ele.offsetLeft;//移动的过程中，如果目标值和当前值之差如果小于步长，那么就不能在前进了if (Math.abs(val) < Math.abs(speed)) {ele.style.left = target + "px";clearInterval(ele.timer);}else{ele.style.left = ele.offsetLeft + speed + "px";}}, 30)}

5.轮播图

• 需求：鼠标放在索引上跳转到对应图，自动播放，放置鼠标呈现箭头而离开消失，切换左右图。
• 思路：
  1.鼠标放在索引上跳转到对应图：原理是tab栏切换，需要用到onmouseover标签；
  2.自动播放：原理为动画，需要设置父盒子刚好能放下一张图，内容则是5张图，横向排列设置定时器向左匀速运动；
  3.放置鼠标呈现箭头而离开消失：需要用到onmouseover等标签；
  4.切换左右图：点击左箭头涉及到动画设置、索引排他思想（因为每幅图对应着各自索引，改变图的话高亮索引也要改变）；点击右箭头与自动播放效果相同。
  此外，需要设置最后一张图的下一张为第一张，第1张图的前一张为最后一张。
• 结果截图：（所用图片来自网络，侵删）
  

5.1 需求1：鼠标放在索引上跳转到对应图

• 排他思想
• 鼠标放在小方块上的索引值square和图片索引key同步，并同时设置动画效果

key = square = this.index;
animate(ul, -this.index * imgWidth);

5.2 需求2：自动播放

• 核心是添加定时器，初始化key=0，square=0，定时器中的函数原理为动画效果，但需要保证square和图片索引key同步。函数的代码如下：

 function autoPlay() {//图片key++；if (key > olLiArr.length) {//最后1张之后跳转第1张ul.style.left = 0;key = 1;}animate(ul, -key * imgWidth);//索引square++;if (square > olLiArr.length - 1) {//索引值如果等于5，立刻变为0；square = 0;}for (var i = 0; i < olLiArr.length; i++) {//排他思想点亮olLiArr[i].className = "";}olLiArr[square].className = "current";}

5.3 需求3：放置鼠标呈现箭头，离开消失

• 需要清除定时器效果，移开后恢复，因此会用到onmouseover事件和onmouseout事件

onmouseover事件：

 div.style.display = "block";clearInterval(timer);

onmouseout事件：

 div.style.display = "none";timer = setInterval(autoPlay, 1000);

5.4 需求4：左右切换图片

• 左右切换图片，会用到点击事件。
  左箭头的代码如下：

//图片
key--;
if (key < 0) {//若滑到第1张前面，则图片索引为最后一张ul.style.left = -imgWidth * (olLiArr.length) + "px";key = olLiArr.length - 1;}animate(ul, -key * imgWidth);
//索引square--;if (square < 0) {//索引值如果等于5，立刻变为0；square = olLiArr.length - 1;}for (var i = 0; i < olLiArr.length; i++) {//排他思想olLiArr[i].className = "";}olLiArr[square].className = "current";                                        

右箭头点击事件为自动播放函数。