HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移动事件应用</title>
<style>
body{
background:pink
}
#picAll{
width:100px;
height:100px;
overflow:hidden;
position:relative
}
</style>
<script src="js/addLoadEvent.js"></script>
<script src="js/move.js"></script>
</head>
<body>
<h1>Dota中各个版本的地图</h1>
<ol id="links">
<li>
<a href="1.html">Dota第一个版本</a>
</li>
<li>
<a href="2.html">Dota第二个版本</a>
</li>
<li>
<a href="3.html">Dota第三个版本</a>
</li>
<li>
<a href="4.html">Dota第四个版本</a>
</li>
</ol>
<div id="picAll">
<img src="images/hb.jpg" alt="Dota各个版本的图片" id="img0"/>
</div>
<script type="text/javascript">
function showpic(){
//var picShows = document.getElementById("pic")
var imgf = document.getElementById("img0");
imgf.style.position = "absolute";
imgf.style.left = "0px";
imgf.style.top = "0px";
var linkss = document.getElementById("links");
var aa = linkss.getElementsByTagName("a");
aa[0].onmouseover = function(){
movement("img0",0,0,10);
}
aa[1].onmouseover = function(){
movement("img0",-100,0,10);
}
aa[2].onmouseover = function(){
movement("img0",-200,0,10);
}
aa[3].onmouseover = function(){
movement("img0",-300,0,10);
}
}
addLoadEvent(showpic);
</script>
</body>
</html>
js代码:(move.js)
function movement(eleId,pos_x,pos_y,interval){
var ele = document.getElementById(eleId);
var start_x = parseInt(ele.style.left);
var start_y = parseInt(ele.style.top);
var dist = 0;
if (ele.mov){
clearTimeout(ele.mov);//这里和重要的,佛祖额会出现卡顿现象,队列堆积所致
}
if (start_x == pos_x && start_y == pos_y){
return true;
}
if (start_x < pos_x)
{
dist = Math.ceil((pos_x-start_x)/10);
start_x += dist;
}
if (start_y < pos_y){
dist = Math.ceil((pos_y-start_y)/10);
start_y += dist;
}
if (start_x > pos_x){
dist = Math.ceil((start_x-pos_x)/10);
start_x -= dist;
}
if (start_y > pos_y){
dist = Math.ceil((start_y-pos_y)/10);
start_y -= dist;
}
ele.style.left = start_x+"px";
ele.style.top = start_y+"px";
//var moveStr = "movement("+ele+","+pos_x+","+pos_y+","+interval+")";
var moveStr = "movement('"+eleId+"',"+pos_x+","+pos_y+","+interval+")";
ele.mov = setTimeout(moveStr,interval);
}
js代码(addLoadEvent.js)
function addLoadEvent(fun){
var oldfun = window.onload;
if (typeof window.onload != 'function'){
window.onload = fun;
}else{
window.onload = function(){
oldfun();
fun();
}
}
}
运行结果: