您的位置：首页 > Web前端 > JavaScript

JS-鼠标悬停移走

2011-12-21 23:27 127 查看

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.class1
{
width:100px; height:100px; background-color:Blue; position:absolute; top:auto; left:auto;
}
</style>
<script type="text/javascript">
var dt;
function dianwo() {
var mydiv = document.getElementById('mydiv');
var x = mydiv.offsetLeft;
var y = mydiv.offsetTop;
x += 10;
y += 10;
mydiv.style.left = x;
mydiv.style.top = y;
}
function qidong() {
dt = setInterval("dianwo()",100);
}
function stop() {
clearInterval(dt);
}
</script>

</head>
<body onload="qidong();">
<div id="mydiv" class="class1" onmouseover="stop();"  onmouseout="qidong();"></div>
</body>
</html>

实现的效果就是这样是：层自动向右下角移动，鼠标移动到层上后，停止移动，鼠标移走后，继续移动。
代码很简单，主要是逻辑别混乱了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： function class html div

相关文章推荐

新的分享

章节导航