Question

to move red box over yellow container - onmouseover-> move right , onmouseout-> move left

我试过pos=document.getElementById("animate").style.left; 然后按setinterval，我尝试使用pos++和pos--移动它。但它没有用。请帮忙。

这里是代码。

＆＃13;

var id_l, id_r;
function right() {
	clearInterval(id_l);
    var box = document.getElementById("animate");
	var pos=box.style.left;
	id_r=setInterval(move,5);
	function move() {
		if(pos==900) {
			clearInterval(id_r);
		}
		else {
		    pos++;
		    box.style.left = pos + "px";
	    }
	}
}
function left() {
	clearInterval(id_r);
    var box = document.getElementById("animate");
	var pos=box.style.left;
	id_l=setInterval(move,5);
	function move() {
		if(pos==0) {
			clearInterval(id_l);
		}
		else {
		    pos--;
		    box.style.left = pos + "px";
	    }
	}
}

＆＃13;

#container {
    position: relative;
    width: 1000px;
    height: 100px;
	background-color: yellow;
}
#animate {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
	left: "200px";
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
	    <link rel="stylesheet" href="styles/styles.css">		
	</head>
	<body>
	    <div id="container" onmouseover="right()" onmouseout="left()">
		    <div id="animate">
			</div>
		</div>
		<script src="scripts/javascript.js"></script>
	</body>
</html>

＆＃13;

Answer 1

你做错了。当您获得该职位时，它会以100px等格式为您提供。您必须修剪px然后进行计算

＆＃13;

var id_l, id_r;
function right() {
	clearInterval(id_l);
    var box = document.getElementById("animate");
	var pos=box.style.left;
    pos = pos.toString().substr(0, pos.length-2); // do not read `px`
	id_r=setInterval(move,5);
	function move() {
		if(pos==900) {
			clearInterval(id_r);
		}
		else {
		    pos++;
		    box.style.left = pos + "px";
	    }
	}
}
function left() {
  
	clearInterval(id_r);
    var box = document.getElementById("animate");
	var pos=box.style.left;
    pos = pos.toString().substr(0, pos.length-2); // do not read px
   
	id_l=setInterval(left,5);
	function left() {
      
          
      
		if(pos==0) {
      
			clearInterval(id_l);
		}
		else {
		    pos--;
		    box.style.left = pos+"px";
	    }
	}
}

＆＃13;

#container {
    position: relative;
    width: 1000px;
    height: 100px;
	background-color: yellow;
}
#animate {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
	left: "200px";
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
	    <link rel="stylesheet" href="styles/styles.css">		
	</head>
	<body>
	    <div id="container" onmouseover="right()" onmouseout="left()">
		    <div id="animate">
			</div>
		</div>
		<script src="scripts/javascript.js"></script>
	</body>
</html>

＆＃13;

Answer 2

您可以在parseInt中添加move()来更正，因为它会获得字符串！

element.style.left仅适用于内联样式！所以使用getComputedStyle更好

var pos = window.getComputedStyle(box).getPropertyValue('left');
function move() {
        pos = parseInt(pos);
        if(pos==900) {
            clearInterval(id_r);
        }
        else {
            pos++;
            box.style.left = pos + "px";
        }
    }

难以比较和分配数据类型

2 个答案: