实用的动画效果：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>实用的动画效果</title>
<style>
#slideshow{ width: 100px; height: 100px; position: relative; overflow: hidden;}
#preview { position: absolute;}
</style>
</head>
<body>
<h1>网页设计</h1>
<p>你应该知道事情</p>
<ol id="linklist">
<li><a href="structure.html">结构</a></li>
<li><a href="presentation.html">表现</a></li>
<li><a href="behavior.html">行为</a></li>
</ol>
<script>
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function moveElement(elementID,final_x,final_y,interval){
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement)
}
if(!elem.style.left){
elem.style.left = ‘0px‘;
}
if(!elem.style.top){
elem.style.top = ‘0px‘;
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
var dist = 0;
if(xpos == final_x && ypos == final_y){
return true;
}
if(xpos < final_x){
dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if(xpos > final_x){
dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if(ypos < final_y){
dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if(ypos > final_y){
dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement(‘"+elementID+"‘,"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function prepareSlideshow(){
// var preview = document.getElementById(‘preview‘);
// preview.style.position = ‘absolute‘;
// preview.style.left = ‘0px‘;
// preview.style.top = ‘0px‘;
var slideshow = document.createElement(‘div‘);
slideshow.setAttribute(‘id‘,‘slideshow‘);
var preview = document.createElement(‘img‘);
preview.setAttribute(‘src‘,‘img/topics.gif‘);
preview.setAttribute(‘alt‘,‘building blocks of web design‘);
preview.setAttribute(‘id‘,‘preview‘);
slideshow.appendChild(preview);
var list = document.getElementById(‘linklist‘);
insertAfter(slideshow,list);
var list = document.getElementById(‘linklist‘);
var links = list.getElementsByTagName(‘a‘);
links[0].onmouseover = function(){
moveElement("preview", -100,0,10);
}
links[1].onmouseover = function(){
moveElement("preview", -200,0,10);
}
links[2].onmouseover = function(){
moveElement("preview", -300,0,10);
}
}
prepareSlideshow();
</script>
</body>
</html>
这份文档中，结构层、表示层和行为层，已经分离的比较彻底了。如果禁用了页面中不会出现动画图片。
时间： 2025-01-06 23:42:36