Javascript & DHTML 实例编程（教程）（四）初级实例篇2—动画

针对Javascript & DHTML 实例编程（教程）（四）初级实例篇2—动画，以下是完整的攻略。

1. 简介

动画是网页设计中常用的元素之一，能使页面变得更加生动有趣。在Javascript & DHTML 实例编程（教程）（四）初级实例篇2—动画中，让我们一起学习如何使用Javascript和DHTML来实现页面动画效果。

2. 代码实现

在本篇教程中，涉及到两个实例。

2.1 实例1：图片滑动效果

本实例实现了一组图片被鼠标悬停时，能够从原位置滑动到固定位置的效果。

代码示例：

<!doctype html>
<html>
<head>
<title>JS & DHTML实例编程 — 图片滑动</title>
<script type="text/javascript">
<!--
var interval = null // 定义全局变量interval

function move(imgElement, x, y, stepx, stepy) {
    if(interval != null) clearInterval(interval); // 如果正在滑动，则先清除之前的定时器
    var posx = x, posy = y; // 记录图片的当前位置
    interval = setInterval(function () {
        posx += stepx; posy += stepy; // 修改图片位置
        imgElement.style.left = posx + "px"; imgElement.style.top = posy + "px";
        if(posx <= 0 || posy <= 0) clearInterval(interval); // 当图片位置到达指定值时，清除定时器
    }, 10);
}

function reset(imgElement, x, y) {
    imgElement.style.left = x + "px"; imgElement.style.top = y + "px";
}
//-->
</script>
</head>
<body>
<h1>使用Javascript & DHTML实现图片滑动</h1>
<p><img src="image1.jpg" alt="图片1" onmouseover="move(this, 0, 0, -1, -1);" onmouseout="reset(this, 100, 100);" /> </p>
<p><img src="image2.jpg" alt="图片2" onmouseover="move(this, 200, 0, 1, -1);" onmouseout="reset(this, 100, 100);" /> </p>
<p><img src="image3.jpg" alt="图片3" onmouseover="move(this, 0, 200, -1, 1);" onmouseout="reset(this, 100, 100);" /> </p>
<p><img src="image4.jpg" alt="图片4" onmouseover="move(this, 200, 200, 1, 1);" onmouseout="reset(this, 100, 100);" /> </p>
</body>
</html>

在上述代码中，move()函数为图片添加了onmouseover事件，当鼠标悬停在图片上时，图片会实现从起始位置的移动，直到到达指定的位置。通过onmouseout事件，reset()函数会将图片的位置还原到初始状态。

2.2 实例2：图片淡入淡出效果

本实例实现了一组图片能够自动实现淡入淡出效果。

代码示例：

<!doctype html>
<html>
<head>
<title>JS & DHTML实例编程 — 图片淡入淡出</title>
<style type="text/css">
#container div {
    position: absolute;
    top: 0px;
    left: 0px;
}
</style>
<script type="text/javascript">
<!--
var current = 0 // 定义全局变量current

function fadeInOut() {
    var count = 4; // 共有4张图片
    current = (current + 1) % count; // 记录当前图片序号
    var next = (current + 1) % count; // 记录下一张图片的序号
    var imgElements = document.getElementsByTagName("img"); // 获取所有图片
    var container = document.getElementById("container"); // 获取图片容器元素
    var step = 10; // 定义淡入淡出的步长
    var initOpacity = 0; // 初始透明度为0
    var maxOpacity = 100; // 最大透明度为100
    var stepOpacity = 10; // 定义透明度变化的幅度
    imgElements[current].style.opacity = maxOpacity / 100; // 将当前图片透明度初始化为最大值
    imgElements[next].style.opacity = initOpacity / 100; // 将下一张图片透明度初始化为最小值
    container.appendChild(imgElements[next].parentNode); // 将下一张图片移动到当前图片前面
    var interval = setInterval(function () {
        var currentOpacity = parseFloat(imgElements[current].style.opacity) * 100; // 获取当前图片的透明度
        var nextOpacity = parseFloat(imgElements[next].style.opacity) * 100; // 获取下一张图片的透明度
        currentOpacity -= stepOpacity; nextOpacity += stepOpacity; // 修改当前图片和下一张图片的透明度
        imgElements[current].style.opacity = currentOpacity / 100; // 修改当前图片的透明度
        imgElements[next].style.opacity = nextOpacity / 100; // 修改下一张图片的透明度
        if(currentOpacity <= 0 || nextOpacity >= 100) clearInterval(interval); // 当图片透明度到达最小或最大值时，清除定时器
    }, step);
}

window.onload = function () {
    var container = document.createElement("div"); // 创建图片容器元素
    container.setAttribute("id", "container"); // 设置容器元素id为container
    var imgElements = []; // 定义imgElements数组来存储所有图片
    for(var i = 0; i < 4; i++) {
        var imgElement = document.createElement("img"); // 创建图片元素
        imgElement.setAttribute("src", "image" + (i+1) + ".jpg"); // 设置图片路径
        imgElement.style.opacity = "0"; // 初始化图片透明度为0
        container.appendChild(imgElement); // 将图片元素添加到容器中
        imgElements.push(imgElement); // 将图片元素存储到imgElements数组中
    }
    document.body.appendChild(container); // 将容器元素添加到body中
    setInterval(fadeInOut, 3000); // 每隔3秒执行一次淡入淡出效果
};
//-->
</script>
</head>
<body>
</body>
</html>

在上述代码中，fadeInOut()函数定义了图片淡入淡出的过程，每次调用该函数会执行下一组图片的淡入淡出操作。将该函数与setInterval()函数结合使用，可以自动轮播图片。