针对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()函数结合使用，可以自动轮播图片。
3. 总结
Javascript & DHTML 实例编程（教程）（四）初级实例篇2—动画教程，涵盖了图片滑动效果和图片淡入淡出效果两个实现动画效果的项目。我们可以通过学习和实践这些示例来了解Javascript和DHTML的应用场景及相关知识点。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Javascript & DHTML 实例编程（教程）（四）初级实例篇2—动画 - Python技术站
微信扫一扫 
支付宝扫一扫 