js控制一个div移动,当鼠标移动到该div上停止移动,我只做出了移动,求大神指导停止。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js控制一个div移动,当鼠标移动到该div上停止移动,我只做出了移动,求大神指导停止。相关的知识,希望对你有一定的参考价值。

function move()
var d = document;
var db = document.body;
var div = d.getElementById("movediv");//移动的div在html里命名的id为movediv
var timer;
var x=3,y=3;
var ds = div.style;
timer = setInterval(function ()
//步长写死为5px
if(div.offsetWidth+div.offsetLeft>=db.clientWidth)
x=-x;

else if(div.offsetHeight+div.offsetTop>=db.clientHeight)
y=-y;

else if(div.offsetLeft<=0)
x=3;

else if(div.offsetTop<=0)
y=3;

ds.left=(div.offsetLeft+x) + 'px';
ds.top =(div.offsetTop+y) + 'px';

,40);

function stop()
//这就是要实现停止的方法


move()方法是在body的onload="move()"调用的,stop()期望在移动的div中用onmouseover="stop()"调用

<body onload="move()">
<div id="movediv" onmouseout="move()" onmouseover="stop()"></div>
<script type="text/javascript">
var timer;
function move()
,,,,,

function stop() //这就是要实现停止的方法
clearInterval(timer);

timer要定义在外边,这样stop中才可以用

参考技术A window.onload=function()
    var div = document.getElementById("movediv");
    move();
    div.onmouseover=function()stop();;

function stop()
    clearInterval(timer);

由于作用域问题,你得在window对象的onload事件句柄中再获取一下div对象。

追问

你的也可以,很感谢你!!

追答

不客气~

以上是关于js控制一个div移动,当鼠标移动到该div上停止移动,我只做出了移动,求大神指导停止。的主要内容,如果未能解决你的问题,请参考以下文章

鼠标移动DIV后变色

JS实现弹性漂浮广告代码

用js控制div跟随鼠标移动,鼠标点击后,鼠标离开,div留在当前点击的位置怎么做

js自动切换选项卡如何实现鼠标移动到相应的内容div中,停止计时。移出后继续自动切换?

用js怎么判断鼠标在某一个div上的停留时间?

js拖拽效果