信鸽网

Js和JQuery获取鼠标指针坐标的实现代码分享

  作者：bea

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><title>jquery 获取鼠标 


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<title>jquery 获取鼠标指针的坐标</title>

<script>

//普通js函数

function test(event) {

 event = event || window.event;

 var x = event.offsetX || event.layerX;

 var y = event.offsetY || event.layerY;

 alert("x="+x+"; y="+y);

 }

//jquery函数

$(function(){

 $("#t").mouseover(

 function(event){

  event = event || window.event; 

  var x = event.offsetX || event.originalEvent.layerX;

  var y = event.offsetY || event.originalEvent.layerY;

  alert("x:"+x+"; y:"+y);

 }

 );

 });

</script>



</head>



<body>

<div id="t" style="float:left;background-color: green;width: 300px;height: 60px;">测试鼠标位置（jquery函数处理）</div>

<div id="s" onmouseover="test(event)" style="float:left;background-color: red;width: 300px;height: 60px;margin-left:10px;">测试鼠标位置（普通js函数处理）</div>



</body>

</html>




有用  |  无用

猜你喜欢

您可能感兴趣的文章: