JS运动特效之任意值添加运动的方法分析

本文将深入JavaScript运动特效中的任意值添加运动方法。借助实际案例，我们将如何通过参数控制实现多物体的不同运动效果。对于热爱JavaScript运动特效的朋友们，这是一个值得参考的教程。

让我们回顾一下先前的例子。在此段代码中，我们为页面上的所有li元素添加了鼠标悬停事件，通过startMove函数实现元素的动态变化。

现在，假设我们的需求有所变化。我们希望第二个li元素在鼠标移入时，其高度发生变化；第三个li元素的边框在鼠标悬停时有所改变；而第四个li元素则在鼠标移入时背景色发生变化。为了实现这些效果，我们可以对原有的代码进行扩展和修改。

我们需要为每个元素定义不同的运动属性和目标值。例如，对于第二个li元素，我们可以设置其高度变化的目标值和速度；对于第三个li元素，我们可以设置边框的变化效果；对于第四个li元素，我们可以设置背景色的变化。这样，我们就可以通过修改startMove函数的参数来实现不同的运动效果。

接下来，我们需要为每个元素的悬停事件绑定不同的参数。例如，对于第二个li元素，我们可以在onmouseover事件中传递高度变化的目标值和速度作为参数；对于第三个li元素，我们可以传递边框的变化效果参数；对于第四个li元素，我们可以传递背景色的变化参数。这样，当鼠标悬停在元素上时，就会调用相应的运动函数并传递相应的参数，从而实现不同的运动效果。

为了优化代码效率和避免重复，我们可以对 `startMove` 函数进行改进，使其能够处理多种属性变化，包括 `width`、`height`、`borderWidth` 和 `opacity`。这样的改进可以让我们通过一个函数实现之前需要多个函数才能完成的功能。下面是对相关代码的优化说明和修改。

我们增加一个 `attr` 参数到 `startMove` 函数中，用来指定需要变化的属性。这样我们就可以通过传递不同的属性名称来执行不同的动画效果。我们将原来直接访问样式属性的方式改为使用方括号 `[]` 来访问样式属性，这种方式更加灵活且适应于不同的属性名称。

在 `window.onload` 函数中，我们需要为每个 `li` 标签添加事件监听器，以触发不同的动画效果。通过使用循环，我们可以为多个 `li` 标签动态添加事件处理函数，避免了重复的代码。

在尝试改变透明度时，我们可能会遇到一些问题。在 CSS 中，透明度的单位是百分比（%），而不是像素（px）。当尝试通过 `startMove` 函数改变透明度时，我们需要将目标值（`iTarget`）的单位从像素转换为百分比。获取透明度的函数可能需要特殊处理，因为透明度的值是一个介于 0 到 1 之间的浮点数，而不是像素值。我们可以使用 `style.opacity` 或 `style['opacity']` 来获取和设置透明度。

下面是修改后的代码片段：

在调用 `startMove` 函数时，将透明度的目标值转换为百分比形式，例如 `startMove(this,'opacity',50)` 表示将透明度设置为 50%。在 `startMove` 函数内部，对透明度的处理需要特别处理，以确保正确设置百分比值。获取透明度的逻辑也需要相应地调整。

HTML部分保持不变：

```html

```

CSS部分保持不变：

```css

```

```javascript