将简单的图片用面向对象方法实现上下左右移动
View Code
<html> <head> <style> #div1{ 800px; height:400px; border:1px solid blue; margin-left:5px; margin-top:5px; background-color:blue; } #imgid{ 80px; height:100px; position:absolute; } #div2{ text-align:center; } </style> <script language="javascript"> function zouteng(){ this.x=0; this.y=0; this.move=function(direct) { switch(direct){ case 0: var imgval=document.getElementById("imgid"); var top=imgval.style.top; top=parseInt(top.substr(0,top.length-2)); imgid.style.top=(top-10)+"px"; break; case 1: var imgval=document.getElementById("imgid"); var left=imgval.style.left; left=parseInt(left.substr(0,left.length-2)); imgid.style.left=(left+10)+"px"; break; case 2: var imgval=document.getElementById("imgid"); var top=imgval.style.top; top=parseInt(top.substr(0,top.length-2)); imgid.style.top=(top+10)+"px"; break; case 3: var imgval=document.getElementById("imgid"); var left=imgval.style.left; left=parseInt(left.substr(0,left.length-2)); imgid.style.left=(left-10)+"px"; break; } } } var zouteng =new zouteng(); function ztmove(direct){ switch(direct){ case 0: zouteng.move(direct); break; case 1: zouteng.move(direct); break; case 2: zouteng.move(direct); break; case 3: zouteng.move(direct); break; } } </script> </head> <body> <div id="div1"> <table id="table1"> <tr> <img src=1.jpg id="imgid" style="top=10px ;left=15px"></img> </tr> </table> </div> <div id="div2"> <table border=1px > <tr><td colspan=3>方向菜单</td></tr> <tr> <td></td> <td><input type="button" value="↑" onclick="ztmove(0);"/></td> <td></td> </tr> <tr> <td><input type="button" value="←" onclick="ztmove(3);"></td> <td></td> <td><input type="button" value="→" onclick="ztmove(1);"></td> </tr> <tr> <td></td> <td><input type="button" value="↓" onclick="ztmove(2);"></td> <td></td> </tr> </table> </div> </body> </html>