mouse鼠标,move移动,合起来就是鼠标移动。
因此mousemove就是当鼠标在元素上移动时,将会触发此事件。
mousemove实例1
<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
<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事件是非常耗费系统资源的,因此请谨慎使用该事件。