js入门

将简单的图片用面向对象方法实现上下左右移动

View Code 
<html>
<head>
<style>
#div1{
width:800px;
height:400px;
border:1px solid blue;
margin-left:5px;
margin-top:5px;
background-color:blue;
}
#imgid{
width: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>

posted on 2012-10-24 22:22  Galloper  阅读(152)  评论(0)  编辑  收藏  举报

导航