600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > onmousemove onmouseout事件

onmousemove onmouseout事件

时间:2023-11-21 21:30:24

相关推荐

onmousemove onmouseout事件

首先我们看文章之前,得把onmousemove和onmouseout搞明白到底是个什么东西来的,先看理论:

onmousemove:事件会在鼠标指针移动到指定的对象上时发生。

onmouseout:事件会在鼠标指针移出指定的对象时发生。

简单点来说就是一个是移入进去时触发,一个是移出时触发,也可以叫它们为移入事件和移出事件。

话不多说,先来看一组代码,如下:

可以看出我HTML给了一个div,是一个正方形,里面带了点文本内容,下面的script标签内容我是用JavaScript写的。外面我用了window.οnlοad=function(){}这个事件,主要是可以起到页面加载的效果,可以有效的防止页面没有加载过来,但是如果你嫌麻烦也可以不用,一样不阻碍里面的内容效果,在这里我还是推荐你使用,毕竟利大于弊。

接下来就是把上面的div标签的id获取到,并且用var声明赋值,当然你上面也可以不用id,用类,那下面就不能通过getEemenById来获取了。这里把它获取好了,最好就控制台console.log输出一下看一下是否获取成功,这样可以保险一点。在下就是加入onmousemove这个方法了,然后我在控制台输出了点文本,看一下效果如何:

移入前:

移入后:

看输出了19个文本,这是我把鼠标移进去输出的,那么为什么会输出19个呢,因为我是移进去的,在鼠标进入这正方形里就开始计算了,所以很难得到1这种数字的,可能还有一种方法,从上方空降下去,可能有机会实现,但我也没有试过,不知道有没有效果。

接下来就是onmouseout这个方法了,这个方法和上面的都差不多,和onmousemove替换一下位置就行了,就不多说了,看效果。

进入前:

进入后:

注意:这里每从里面移出一次就输出一下,这里输出了8次是因为我从里面移出了8次。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。