鼠标移动事件

最新推荐文章于 2025-05-19 11:10:45 发布

翻译最新推荐文章于 2025-05-19 11:10:45 发布 · 7.1k 阅读

鼠标移动事件( onmousemove )是鼠标在页面上进行移动时触发事件处理程序，可以在该事
件中用document对象实时读取鼠标在页面中的位置。

下面在页面中添加一串文字及一个层，自定义函数move()，当鼠标移动到指定的语句时，将通过层动态显示飞出来的星形标记;自定义函数out(),当鼠标移出指定的文字时，隐藏星形标记。

代码如下。
<body>
<font style="font-size:16px">将鼠标指向这里:</ font><a style="color:#3300FF; font-size:16px; font-style:italic "onMouseMove= "move ()” onMouseOut="return out() ;">将飞出一个星形标记</a>
<div id="="div1" style="width: 60px; height: 30px; font-size:30px; color:#FF00FF; font-weight:bold;">★</div>
<script language="JavaScript">
div1.style. position="absolute";                //将层设置为可移动的状态
divl.style.visibility="hidden";                    / /将层隐藏
var PT;
var bool=false;
var size=40;
function out() {                                            //当鼠标移出指定的文字时，调用自定义函数out()
div1.style. visibility="hidden";                       //隐藏层
div1. style. fontSize="40px";                        //将层的大小设置为初始状态
size=40;
function move() {                                        //当鼠标移动到指定的语句时，将层显示在指定位置
//获取鼠标的当前位置
var x=window. event. x+document .body.cl ientLeft ;
var y=window. event. y+document. body. clientTop;
div1. style.left=x;                                            //设置层的位置
div1.style. top=y;
divl.style.visibility="visible";                            //使层为显示状态
</script>
</body>