<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Design</title>
<link rel="stylesheet" type="text/css" href="layoutstyle.css">
</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="j_06.jpg" alt="building blocks of web design" id="preview">
</div>
<script src="slideshow.js"></script>
</body>
</html>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
window.onload=Slideshow;
function Slideshow() {
var preview=document.getElementById("preview");
preview.style.positon="absolute";
preview.style.left="0px";
preview.style.top="0px";
//取得表中所有连接
var list=document.getElementById("linklist");
var links=list.getElementsByTagName("a");
//为mouseover事件添加动画效果
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);
}
}
function moveElement(elementID,final_x,final_y,interval){//后面的位置
var elem=document.getElementById(elementID);
if (elem.movement){
clearTimeout(elem.movement);
}
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";
var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement=clearTimeout(repeat,interval);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
运行后浏览器F12不报错但也不运行js的功能只有html结构