JS-鼠标悬停移走

返回顶部
查看留言
转到底部

现在的位置: 首页 > 综合 > 正文

JS-鼠标悬停移走

2013年12月04日 ⁄ 综合 ⁄ 共 650字 ⁄ 字号小中大 ⁄ 评论关闭

<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>

实现的效果就是这样是：层自动向右下角移动，鼠标移动到层上后，停止移动，鼠标移走后，继续移动。

代码很简单，主要是逻辑别混乱了