JavaScript实现元素匀速运动效果

"基于匀速运动的实例讲解(侧边栏,淡入淡出)" 在JavaScript中实现元素的动态运动，通常涉及到改变元素的CSS属性，例如位置、大小或透明度，来创建视觉上的动画效果。这个实例主要讨论了如何通过调整`left`属性使一个`div`元素在页面上做匀速运动。 首先，为了实现元素的运动，我们需要对元素进行定位。在示例中，`div`元素被设置为绝对定位（`position: absolute`），并设置了初始的`left`值为0px。这样，我们可以通过改变`left`属性来改变元素在页面中的水平位置，从而产生运动的效果。 ```html <style> div { width: 100px; height: 100px; background: red; position: absolute; left: 0px; } </style> ``` 接下来，我们创建一个按钮，当用户点击时触发元素的运动。按钮的HTML代码如下： ```html <input type="button" value="动起来" /> <div id="box"></div> ``` 为了让`div`在点击按钮后开始运动，我们需要在JavaScript中监听按钮的`onclick`事件，并在事件处理函数中更新`div`的`left`属性。最初的实现简单地将`left`值每次增加10px： ```javascript window.onload = function() { var oBtn = document.querySelector("input"), oBox = document.querySelector('#box'); oBtn.onclick = function() { oBox.style.left = oBox.offsetLeft + 10 + 'px'; } } ``` `offsetLeft`属性返回元素相对于其最近的非静态定位祖先元素的左边界的距离，不包括单位（px）。因此，我们将其与10相加并添加'px'单位，使得元素向右移动。 另一种方法是使用`currentStyle`（IE）或`getComputedStyle`（其他浏览器）来获取元素的行内样式（包括单位）： ```javascript function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } window.onload = function() { var oBtn = document.querySelector("input"), oBox = document.querySelector('#box'); oBtn.onclick = function() { oBox.style.left = parseInt(css(oBox, 'left')) + 10 + 'px'; } } ``` 这里，`css`函数用于兼容性处理，根据浏览器特性选择获取样式的方法。然后在`onclick`事件处理函数中，我们使用`parseInt`解析`left`的值，加上10后再转换回字符串并添加单位，使得元素同样可以移动。 然而，这样的运动并不平滑，因为每次点击只移动了10px。要实现匀速运动，通常会使用定时器（如`setInterval`）来周期性地更新元素的位置，直到达到预期的终点。同时，可能还需要考虑停止运动（通过`clearInterval`）以及淡入淡出效果，这可以通过调整元素的`opacity`属性来实现。 这个实例展示了基础的JavaScript动画原理，但实际应用中，开发者可能会使用更高级的动画库，如jQuery的`animate`函数或者CSS3的`transition`和`animation`属性，以获得更流畅、更高效的动画效果。