<!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结构
添加回答
举报
0/150
提交
取消