js简单运动

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>movement</title>
<style type="text/css">
#imgShow{
width: 100px;
height: 100px;
overflow:hidden;
position:relative;
}
#preview{
position: absolute;
width:100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<h1>Web Design</h1>
<p>链接图片展览</p>
<ol id="linklist">
<li><a href="">aa</a></li>
<li><a href="">bb</a></li>
<li><a href="">cc</a></li>
<div id="preview"></div>
</ol>


<script type="text/javascript">
window.onload=function(){
function moveElement(targetId,final_x,final_y,time){
if(!document.getElementById) return false;
if(!document.getElementById(targetId)) return false;
var iTarget=document.getElmentById('targetId');
if(iTarget.movement){
clearTimeout(iTarget.movement);
}
if(!iTarget.style.left){
iTarget.style.left='0px';
}
if(!iTarget.style.top){
iTarget.style.top='0px';
}
var x=parseInt(iTarget.style.left);
var y=parseInt(iTarget.style.top);
var speed=0;
if(x === final_x && y === final_y){
return true;
}
if(x < final_x){
speed=Math.ceil((final_x - x)/10);
x+=speed;
}
if(x > final_x){
speed=Math.ceil((x - final_x)/10);
x-=speed;
}
if(y < final_y){
speed=Math.ceil((final_y - y)/10);
y+=speed;
}
if(y > final_y){
speed=Math.ceil((y - final_y)/10);
y-=speed;
}
iTarget.style.left=x+'px';
iTarget.style.top=y+'px';
iTarget.movement=setTimeout(function(){
moveElement(targetId,final_x,final_y,time);
},time);
}

var list=document.getElmentById('linklist');
var links=list.getElmentsByTagName('a');
links[0].onmouseover = function(){
moveElement('preview',-100,10,1000);
}
}
/*function imgShow(){
if(!document.getElementById) return false;
if(!document.getElementById(targetId)) return false;
if(!document.getElmentById('linklist')) return false;
var imgShow=document.createElement('div');
imgShow.setAttribute('id','imgShow');
var pre=document.createElement('img');
pre.setAttribute('src','../images/pre.jpg');
imgShow.appendChild(pre);
var lists=document.getElmentById('linklist');
insertAfter(imgShow,lists);
}*/

function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild === targetElement){
parent.appendChild(newElement);
}else{
parent.InsertBefore(newElement,targetElement.nextSibling);
}
}


function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !== 'function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}

</script>
</body>
</html>