css.css外部样式表
/*水平翻转*/
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}/*垂直翻转*/
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    /*IE*/
    filter:FlipV;
}* {margin:0,0}.box{
margin:100px 300px;
width:500px;
height:300px;
border:1px solid blue;
background-color:#B4CDCD;
position:absolute;
}#pic{
position:absolute;
left:0;
top:0;
border:1px solid red;

}
.ctrl{
margin:50px auto 0 auto;
width:502px;
text-align:center;
}js.js外部文件
function Dog()
{
this.move=function(n)
{
this.x=0;
this.y=0;
switch(n)
{
case 0:
var p=document.getElementById('pic');
var top=p.currentStyle.top;
top=parseInt(top.substr(0,top.length-2));
p.style.top=(top-10)+"px";
break;
case 1:
var p=document.getElementById('pic');
var top=p.currentStyle.top;
top=parseInt(top.substr(0,top.length-2));
p.style.top=(top+10)+"px";
break
case 2:
var p=document.getElementById('pic');
var left=p.currentStyle.left;
left=parseInt(left.substr(0,left.length-2));
p.style.left=(left+10)+"px";
break;
case 3:
var p=document.getElementById('pic');
var left=p.currentStyle.left;
left=parseInt(left.substr(0,left.length-2));
p.style.left=(left-10)+"px";
break
}
}
}var dog=new Dog();function move(n)
{
switch(n)
{
case 0:
dog.move(n);
break
case 1:
dog.move(n);
break
case 2:
dog.move(n);
break
case 3:
dog.move(n);
break
}
}
html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>
<script type="text/javascript" src="./js/js.js" ></script>
<link rel="stylesheet" type="text/css" href="./css/css.css" />
</head><body>
<div class="box"><img id="pic" class="flipx" src="./img/dog.gif" /></div>
<div class="ctrl">
<input type="button" name="up" value="上" onclick="move(0)" />
<input type="button" name="down" value="下" onclick="move(1)" />
<input type="button" name="left" value="左" onclick="move(2)" />
<input type="button" name="right" value="右" onclick="move(3)" />
</div>
</body></html>