这段代码在IE9中能动在Chrome浏览器中无法动。该怎么解决

2012-04-20

这段代码在IE9中能动在Chrome浏览器中无法动。css.css外部样式表CSS code/*水平翻转*/.flipx {-moz-transfo

这段代码在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);

楼主可以单步调试一下

热点排行

JavaScript

这段代码在IE9中能动在Chrome浏览器中无法动。该怎么解决