这段代码在IE9中能动在Chrome浏览器中无法动。

googleelgoog 2012-04-12 12:40:11

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>

...全文

112 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

hch126163 2012-04-12

打赏
举报

var top=p.currentStyle.top;
top=parseInt(top.substr(0,top.length-2));

==》

var t=parseInt(p.style.top,10);

楼主可以单步调试一下

张某人 2012-04-12

打赏
举报

p.style.left=(left-10)+"px";
这里应该有问题吧，如果是 = 后面就不要px,如果后面有px，就用:
p.style.lfet:(left-10)+"px";

or

p.style.left = (left-10);

变量最好不要用left , top 这些字符，js最容易过敏了，动不动就碰到关键字了