2
to move red box over yellow container - onmouseover-> move right , onmouseout-> move left困難
は、Iはpos++とpos--を使用して移動しようとしました。しかしそれはうまくいかなかった。助けてください。
ここにコードがあります。
var id_l, id_r;
function right() {
\t clearInterval(id_l);
var box = document.getElementById("animate");
\t var pos=box.style.left;
\t id_r=setInterval(move,5);
\t function move() {
\t \t if(pos==900) {
\t \t \t clearInterval(id_r);
\t \t }
\t \t else {
\t \t pos++;
\t \t box.style.left = pos + "px";
\t }
\t }
}
function left() {
\t clearInterval(id_r);
var box = document.getElementById("animate");
\t var pos=box.style.left;
\t id_l=setInterval(move,5);
\t function move() {
\t \t if(pos==0) {
\t \t \t clearInterval(id_l);
\t \t }
\t \t else {
\t \t pos--;
\t \t box.style.left = pos + "px";
\t }
\t }
}#container {
position: relative;
width: 1000px;
height: 100px;
\t background-color: yellow;
}
#animate {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
\t left: "200px";
}<!DOCTYPE html>
<html>
<head>
\t <link rel="stylesheet" href="styles/styles.css"> \t \t
\t </head>
\t <body>
\t <div id="container" onmouseover="right()" onmouseout="left()">
\t \t <div id="animate">
\t \t \t </div>
\t \t </div>
\t \t <script src="scripts/javascript.js"></script>
\t </body>
</html>