学习DOM编程艺术第十章遇到的问题

nopeeee 2019-09-04 02:06:52

list.html



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Web Design</title>

<link href="styles/10.2layout.css" rel="stylesheet" media="screen"/>

</head>

<body>

<h1>Web Design</h1>

<p>These are the things you should know.</p>

<ol id="linklist">

	<li>

		<a href="structure.html">Structure</a>

	</li>

	<li>

		<a href="presentation.html">Presentation</a>

	</li>

	<li>

		<a href="behavior.html">Behavior</a>

	</li>

</ol>

<div id="slideshow">  

	<img src="images/topics.gif" alt="building blocks of web design" id="preview"/>

</div>

<script src="scripts/prepareSlideshow.js"></script>

<script src="scripts/addLoadEvent.js"></script>

<script src="scripts/moveElement.js"></script>

</body>

</html>

10.2layout.css



#slideshow{

	width:100px;

	height:100px;

	position:relative; 

	overflow:hidden;

prepareSlideshow.js



addLoadEvent(prepareSlideshow);

function prepareSlideshow(){

	if(!document.getElementById){

		return false;

	}

	if(!document.getElementsByTagName){

		return false;

	}

	if(!document.getElementById("linklist")){

		return false;

	}

	if(!document.getElementById("preview")){

		return false;

	}

	var preview=document.getElementById("preview");

	preview.style.position="absolute";

	preview.style.left="0px";

	preview.style.top="0px";

	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);

	};

}

addLoadEvent.js



function addLoadEvent(func){

	"use strict";

	var oldload=window.onload;

	if(typeof window.onload!='function'){

		window.onload=func;

	}else{

		window.onload=function(){

			oldload();

			func();

		};

	}

}

moveElement.js



function moveElement(elementID,final_x,final_y,interval){

	if(!document.getElementById){

		return false;

	}

	if(!document.getElementById(elementID)){

		return false;

	}

	var elem=document.getElementById(elementID);

	var xpos=parseInt(elem.style.left);   

	var ypos=parseInt(elem.style.top);

	if(xpos==final_x&&ypos==final_y){

		return true;

	}

	if(xpos<final_x){

		xpos++;

	}

	if(xpos>final_x){

		xpos--;

	}

	if(ypos<final_y){

		ypos++;

	}

	if(ypos>final_y){

		ypos--;

	}

	elem.style.left=xpos+"px";

	elem.style.top=ypos+"px";

	movement=setTimeout(function(){

		moveElement(elementID,final_x,final_y,interval);

	},interval);

}