文章目录

jquery mousemove()使用方法详解

mousemove事件从字面意思理解,就能大概了解其作用。

mouse鼠标,move移动,合起来就是鼠标移动。

因此mousemove就是当鼠标在元素上移动时,将会触发此事件。

mousemove实例1

html代码<script type="text/javascript">
$(document).ready(function(){
  $(document).mousemove(function(e){
    $("span").text("X坐标:"+e.pageX + ", Y坐标:" + e.pageY);
  });
});
</script>
<p>鼠标当前坐标为: <span></span></p>
亲自测试一下

此实例的作用是将获得的鼠标指针在页面中的位置赋值到span元素里面显示。

mousemove实例2

html代码<style>
div{width:220px; height:170px;background:yellow; border:2px dotted;}
div i{width:10px;height:10px; background:#333; display:inline-block;}
</style>
<div>将鼠标移到这里<i></i></div>
<script>
$("div").mousemove(function(e){
	$(this).find("i").css({"marginLeft":e.pageY+15+"px"})
});
</script>
亲自测试一下

上面的实例,当鼠标移到黄色区域里面,i元素会跟着改变marginLeft值。

注意,处理mousemove事件是非常耗费系统资源的,因此请谨慎使用该事件。

本文网址:http://www.santii.com/article/51.html


数据更新时间:2018-09-21