js鼠标移入移出什么意思啊

JavaScript013

js鼠标移入移出什么意思啊,第1张

js鼠标键移入移出界面。语句js鼠标移入移出内的js鼠标为js鼠标按键,而移入移出则是移入移出界面的意思,总结为js鼠标键移入移出界面的意思,用于形容鼠标的去向。鼠标,是计算机的一种外接输入设备。

在前段使用JavaScript开发获取鼠标当前位置来计某个功能,如何获取鼠标当前的位置,其实很多人都不知道怎么做,为此我为大家整理推荐了相关的知识,希望大家喜欢。

js设置鼠标位置的方法

新建一个html代码页面,在这个html页面找到<body>,然后在这个<body>里创建一个用来显示坐标位置的<div>,并给这个<div>添加一个id。如图

创建<div>的代码:

<div id="point-loc"></div>

使用pageX、pageY获取鼠标当前位置。在<title>标签后面新建一个<script>,创建鼠标移动时获取鼠标当前的位置。如图:

js代码:

<script type="text/javascript">

document.onmousemove = function(e){

var loc = "当前位置 x:"+e.pageX+",y:"+e.pageY

document.getElementById("point-loc").innerHTML = loc

}

</script>

保存html后使用浏览器打开即可看到效果。如图:

4页面所有代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>js获取鼠标位置</title>

<script type="text/javascript">

document.onmousemove = function(e){

var loc = "当前位置 x:"+e.pageX+",y:"+e.pageY

document.getElementById("point-loc").innerHTML = loc

}

</script>

</head>

<body>

<div id="point-loc"></div>

</body>

功能:使用js制作鼠标移过去会显示隐藏的内容

步骤:

1、构造好页面内容;

2、在css中设置一个隐藏类hide,类的样式为display:none;设置显示类show,样式为display:block;

3、给需要隐藏的内容设置类名为hide,这样就隐藏了控件

4、在js标签中,通过控件的类名或者id获取到隐藏对象obhide以及需要监控的对象ob2,再对ob2对象设置onmouseover方法,在这个方法中,将bohide的类名hide更换成show,这样,在鼠标进入ob2控件之中,就会显示隐藏的obhide的内容,

对ob2对象设置onmouseout方法,在这个方法中,将bohide的类名show更换成hide,这样,在鼠标离开ob2控件,就会隐藏obhide的内容,