HTML案例练习一
发现其实JS也是挺容易的，也挺好玩的，写的一个控制图片移动的小案例，对DOM机制还是不怎么熟。
<html>
<head>
<style type = "text/css">
</style>
<script language = "javascript" type = "text/javascript">
function m()
{
this.x = 0;
this.y = 0;
this.move = function(direct){
switch(direct){
case 1:
var mmm = document.getElementById('renwu');
var top = mmm.style.top;
top = parseInt(top.substr(0,top.length-2));
mmm.style.top = (top-10)+"px";
break;
case 2:
var mmm = document.getElementById('renwu');
var left = mmm.style.left;
left = parseInt(left.substr(0,left.length-2));
mmm.style.left = (left+10)+"px";
break;
case 3:
var mmm = document.getElementById('renwu');
var top = mmm.style.top;
top = parseInt(top.substr(0,top.length-2));
mmm.style.top = (top+10)+"px";
break;
case 4:
var mmm = document.getElementById('renwu');
var left = mmm.style.left;
left = parseInt(left.substr(0,left.length-2));
mmm.style.left = (left-10)+"px";
break;
}
}
}
var mm = new m();
function m_move(direct){
switch(direct) {
case 1:
mm.move(direct);
break;
case 2:
mm.move(direct);
break;
case 3:
mm.move(direct);
break;
case 4:
mm.move(direct);
break;
}
}
</script>
</head>
<body>
<table border = "1px" class = "control">
<tr><td colspan = "3"align="center">test</td></tr>
<tr><td></td><td><input type = "button"value = " UP " onclick = "m_move(1)"/></td><td></td></tr>
<tr><td><input type = "button"value = "LEFT"onclick = "m_move(4)"/><td></td><td><input type = "button"value = "RIGHT"onclick = "m_move(2)"/></td></tr>
<tr><td></td><td><input type = "button"value = "DOWN"onclick = "m_move(3)"/></td><td></td></tr>
</table>
<div class = "pic">
<img id = "renwu" style = "width:180px;left:180px;top:50px;position:absolute;" src = "renwu.jpg"/>
<img style = "width:558px;left:400px;top:300px;position:absolute;" src = "beijin.png"/>
</div>
</body>
</html>