这段代码在IE9中能动在Chrome浏览器中无法动。
css.css外部样式表
- CSS code
/*水平翻转*/.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外部文件
- JScript code
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
- HTML code
<!DOCTYPE htmlPUBLIC "-//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>
[解决办法]
p.style.left=(left-10)+"px";
这里应该有问题吧，如果是 = 后面就不要px,如果后面有px，就用:
p.style.lfet:(left-10)+"px";
or
p.style.left = (left-10);
变量最好不要用left , top 这些字符，js最容易过敏了，动不动就碰到关键字了
[解决办法]
var top=p.currentStyle.top;
top=parseInt(top.substr(0,top.length-2));
==》
var t=parseInt(p.style.top,10);
楼主可以单步调试一下