使用javascript移动Div框_Javascript_Html

使用javascript移动Div框

javascript html

使用javascript移动Div框,javascript,html,Javascript,Html,我正在尝试创建一个300px×300px的div框，当用户将鼠标放在框上时，它会移动几个像素。唯一的问题是当div到达浏览器大小的末尾时，我希望它开始以另一种方式移动，而不是使窗口滚动。任何帮助都将不胜感激 <div style="left:300px; top:300px; width:300px; height:300px; background:blue;> </div> 首先创建两个变量来跟踪速度和方向： var speed = 10, // the box w

我正在尝试创建一个300px×300px的div框，当用户将鼠标放在框上时，它会移动几个像素。唯一的问题是当div到达浏览器大小的末尾时，我希望它开始以另一种方式移动，而不是使窗口滚动。任何帮助都将不胜感激

<div style="left:300px; top:300px; width:300px; height:300px; background:blue;>
</div>

首先创建两个变量来跟踪速度和方向：
var speed = 10, // the box will move by 10 pixels on every step
    direction = 1; // 1 moves in the positive direction; -1 vice versa

然后获取对方框的引用，并将事件处理程序附加到其“mouseover”事件：
上述代码将为webkit浏览器中left
属性的任何更改设置动画。您可以添加其他供应商前缀（为了与将来的版本兼容，不添加任何前缀），以便在支持它的其他浏览器中启用动画
编辑
关于您在浏览器启动时运行脚本的评论：
首先，如果要将JavaScript代码嵌入HTML页面，请确保将其包装在
标记中。您可以运行验证器（例如），以确保您拥有正确的文档结构
其次，将代码放在这些标记中，尽可能靠近文档正文的末尾，即

您还可以将整个JavaScript代码包装在一个函数中，该函数将在文档完全加载后执行。通过这种方式，可以从文档头放置（或远程需要）代码（但为什么要这样做？）。这是如何做到的：
window.addEventListener('load', function () {
    // ... the code goes here
});

（不推荐）备选方案是：
window.onload = function () {
    // ... the code goes here
};

或者（请避免，这只是一个示例）在HTML中：


因此，生成的代码可能如下所示：
<!DOCTYPE html>
<html>
<head>
    <style>
        /* ... the CSS goes here */
    </style>
</head>
<body>
    <div id="box">I'm a box.</div>
    <script>
        // ... the JavaScript code goes here
    </script>
</body>
</html>


/* ... CSS在这里*/
我是一个盒子。
// ... 这里是JavaScript代码

有关Internet Explorer的特别说明
在9版以下的Internet Explorer中不支持addEventListener
。您应该使用attachEvent
。
根据描述，我认为您希望设置div高度的动画，如果您能够使用Jquery，您可以尝试以下操作：
$('.div').hover(function() {
    $(this).animate({
        height: $(document).height() - 50
    }, 300);
},function() {
    $(this).animate({
        height: '30px'
    }, 300);
});

演示：
这应该可以：
Javascript：
var over = false;
var dir = 0;
var speed = 10;

window.onload = function () {
    var div = document.getElementById("myDiv");
    var top = 10;
    div.onmouseover = function () {
        over = true;
        timer;
    }
    div.onmouseout = function () {
        over = false;
        setTimeout(timer, 1);
    }

    var timer = setInterval(function () {
        //direction
        if (div.offsetTop >= document.body.offsetHeight)
            dir = 1;
        else if (div.offsetTop <= 0)
            dir = 0;


        if (over && div.offsetTop < document.body.offsetHeight && dir == 0) {
            top += speed;
        }
        else if (over && top > 0 && dir == 1)
            top -= speed;

        div.style.top = top + "px";
    }, 100);
};

<div style="width: 800px; height: 400px">
    <div id="myDiv" style="width: 300px; height: 300px; background: blue; position: absolute">
    </div>
</div>

var over=false；
var-dir=0；
无功转速=10；
window.onload=函数（）{
var div=document.getElementById（“myDiv”）；
var-top=10；
div.onmouseover=函数（）{
过度=正确；
定时器；
}
div.onmouseout=函数（）{
过度=错误；
设置超时（计时器，1）；
}
变量计时器=设置间隔（函数（）{
//方向
if（div.offsetTop>=document.body.offsetHeight）
dir=1；
else if（div.offsetTop 0&&dir==1）
top-=速度；
div.style.top=top+px；
}, 100);
};

标记：
var over = false;
var dir = 0;
var speed = 10;

window.onload = function () {
    var div = document.getElementById("myDiv");
    var top = 10;
    div.onmouseover = function () {
        over = true;
        timer;
    }
    div.onmouseout = function () {
        over = false;
        setTimeout(timer, 1);
    }

    var timer = setInterval(function () {
        //direction
        if (div.offsetTop >= document.body.offsetHeight)
            dir = 1;
        else if (div.offsetTop <= 0)
            dir = 0;


        if (over && div.offsetTop < document.body.offsetHeight && dir == 0) {
            top += speed;
        }
        else if (over && top > 0 && dir == 1)
            top -= speed;

        div.style.top = top + "px";
    }, 100);
};

<div style="width: 800px; height: 400px">
    <div id="myDiv" style="width: 300px; height: 300px; background: blue; position: absolute">
    </div>
</div>



您的div必须定位为绝对，第一个div代表您的浏览器。

<script>
 var topPos = 0;
 var leftPos = 0;
 var leftAdder = 1;
 var topAdder = 1;
 var id;

    function move() {  
        clearInterval(id);
        id = setInterval(frame, 3);

        function frame() {

        leftPos = leftPos + leftAdder;
        topPos = topPos + topAdder; 
        document.getElementById("box").style.left = leftPos + 'px'; 
        document.getElementById("box").style.top = topPos + 'px'; 

        if (leftPos == 500) {
            leftAdder = -1;  
        }
        if (topPos == 350) {
            topAdder = -1;  
        }
        if (leftPos == 0) {
            leftAdder = 1;  
        }
        if (topPos == 0) {
            topAdder = 1;  
        }  
        }
    }

    function stop(){
        clearInterval(id);
    }

</script>

var-topPos=0；
var-leftPos=0；
var左加法器=1；
var-topAdder=1；
变量id；
函数move（）{
清除间隔（id）；
id=设置间隔（第3帧）；
函数框架（）{
leftPos=leftPos+leftAdder；
topPos=topPos+topAdder；
document.getElementById（“box”）.style.left=leftPos+'px'；
document.getElementById（“box”）.style.top=topPos+'px'；
如果（leftPos==500）{
左加法器=-1；
}
如果（topPos==350）{
topAdder=-1；
}
如果（leftPos==0）{
左加法器=1；
}
如果（topPos==0）{
topAdder=1；
}  
}
}
函数停止（）{
清除间隔（id）；
}
如果您希望输入箭头来指示框的移动，我们可以使用此代码。试试看
        <script>
            var topPos = 0;
            var leftPos = 0;
            var id;

            function moveRight() {  
              clearInterval(id);
              id = setInterval(frame, 10);
              function frame() {
                if (leftPos == 350) {
                  clearInterval(id);
                  gameOver();
                } else {
                  leftPos++; 
                  document.getElementById("box").style.left = leftPos + 'px'; 
                }
              }
            }

            function moveLeft() {  
              clearInterval(id);
              id = setInterval(frame, 10);
              function frame() {
                if (leftPos == 0) {
                  clearInterval(id);
                  gameOver();
                } else {
                  leftPos--; 
                  document.getElementById("box").style.left = leftPos + 'px'; 
                }
              }
            }

            function moveDown() {  
              clearInterval(id);
              id = setInterval(frame, 10);
              function frame() {
                if (topPos == 350) {
                  clearInterval(id);
                  gameOver();
                } else {
                  topPos++; 
                  document.getElementById("box").style.top = topPos + 'px'; 
                }
              }
            }

            function moveUp() {  
              clearInterval(id);
              id = setInterval(frame, 10);
              function frame() {
                if (topPos == 0) {
                  clearInterval(id);
                  gameOver();
                } else {
                  topPos--; 
                  document.getElementById("box").style.top = topPos + 'px'; 
                }
              }
            }

            function gameOver(){
                leftPos = 0;
                topPos = 0;
                alert("Game Over...");
                document.getElementById("box").style.top = '0px'; 
                document.getElementById("box").style.left = '0px'; 
            }
        </script>


var-topPos=0；
var-leftPos=0；
变量id；
函数moveRight（）{
清除间隔（id）；
id=设置间隔（帧，10）；
函数框架（）{
如果（leftPos==350）{
清除间隔（id）；
gameOver（）；
}否则{
leftPos++；
document.getElementById（“box”）.style.left=leftPos+'px'；
}
}
}
函数moveLeft（）{
清除间隔（id）；
id=设置间隔（帧，10）；
函数框架（）{
如果（leftPos==0）{
清除间隔（id）；
gameOver（）；
}否则{
左位--；
document.getElementById（“box”）.style.left=leftPos+'px'；
}
}
}
函数moveDown（）{
清除间隔（id）；
id=设置间隔（帧，10）；
函数框架（）{
如果（topPos==350）{
清除间隔（id）；
gameOver（）；
}否则{
topPos++；
document.getElementById（“box”）.style.top=topPos+'px'；
}
}
}
函数moveUp（）{
清除间隔（id）；
id=设置间隔（帧，10）；
函数框架（）{
如果（topPos==0）{
清除间隔（id）；
gameOver（）；
}否则{
托波斯--；
document.getElementById（“box”）.style.top=topPos+'px'；
}
}
}
函数gameOver（）{
leftPos=0；
topPos=0；
警报（“游戏结束…”）；
document.getElementById（“box”）.style.top='0px'；
document.getElementById（“box”）.style.left='0px'；
}
你能发布你当前的JavaScript吗，或者你还有JavaScript吗？嘿，我如何在
<script>
 var topPos = 0;
 var leftPos = 0;
 var leftAdder = 1;
 var topAdder = 1;
 var id;

    function move() {  
        clearInterval(id);
        id = setInterval(frame, 3);

        function frame() {

        leftPos = leftPos + leftAdder;
        topPos = topPos + topAdder; 
        document.getElementById("box").style.left = leftPos + 'px'; 
        document.getElementById("box").style.top = topPos + 'px'; 

        if (leftPos == 500) {
            leftAdder = -1;  
        }
        if (topPos == 350) {
            topAdder = -1;  
        }
        if (leftPos == 0) {
            leftAdder = 1;  
        }
        if (topPos == 0) {
            topAdder = 1;  
        }  
        }
    }

    function stop(){
        clearInterval(id);
    }

</script>

        <script>
            var topPos = 0;
            var leftPos = 0;
            var id;

            function moveRight() {  
              clearInterval(id);
              id = setInterval(frame, 10);
              function frame() {
                if (leftPos == 350) {
                  clearInterval(id);
                  gameOver();
                } else {
                  leftPos++; 
                  document.getElementById("box").style.left = leftPos + 'px'; 
                }
              }
            }

            function moveLeft() {  
              clearInterval(id);
              id = setInterval(frame, 10);
              function frame() {
                if (leftPos == 0) {
                  clearInterval(id);
                  gameOver();
                } else {
                  leftPos--; 
                  document.getElementById("box").style.left = leftPos + 'px'; 
                }
              }
            }

            function moveDown() {  
              clearInterval(id);
              id = setInterval(frame, 10);
              function frame() {
                if (topPos == 350) {
                  clearInterval(id);
                  gameOver();
                } else {
                  topPos++; 
                  document.getElementById("box").style.top = topPos + 'px'; 
                }
              }
            }

            function moveUp() {  
              clearInterval(id);
              id = setInterval(frame, 10);
              function frame() {
                if (topPos == 0) {
                  clearInterval(id);
                  gameOver();
                } else {
                  topPos--; 
                  document.getElementById("box").style.top = topPos + 'px'; 
                }
              }
            }

            function gameOver(){
                leftPos = 0;
                topPos = 0;
                alert("Game Over...");
                document.getElementById("box").style.top = '0px'; 
                document.getElementById("box").style.left = '0px'; 
            }
        </script>