获取鼠标坐标

来源：互联网发布：大飞鲨飞控调参软件编辑：程序博客网时间：2024/05/03 06:00

JQUERY中不为人知的秘密之一

jQuery的向来以其完善的文档著称，而不像早期的Prototype那样库写的很牛，而文档很糟糕，其他使用者不得不看他的源码以了解一些功能。
但是，不得不说，文档的更新速度是远没有其程序变化的快的。
这个专题就是用于介绍一些隐藏在jQuery源码内部的事情。

今天先揭秘2条

1，序列化一个对象
类似于Prototype中的$H(obj).toQueryString()
jQuery中也有一个内部函数，用于在ajax时候序列化对象用：
jQuery.param

var obj={A:1,B:2,C:3};
jQuery.param(obj); //A=1&B=2&C=3

2，获取原始的event对象
用过jQuery都知道，jQuery提供了一个事件对象，用于在事件处理函数中使用，并且这个对象已经将ie中的事件修复成了标准的W3C事件。具体可以参考我这篇日志

但他并没有完全统一所有事件，比如获取mousemove的event事件中鼠标的相对坐标的位置，ie和ff分别用的x和layerX来实现，而jQuery没有给统一。我们只能使用原始的event对象再自己判断，此时就可以使用
e.originalEvent
这样就得到了原始的event对象了
在ie中，这个指向的是window.event，而在其他浏览器中，就是传递给事件处理函数的第一个参数。

像上面那个例子，我就用了如下的代码，用于获取鼠标的相对坐标。

$(“#menuWrap”).mousemove(function(e) {
var xx=e.originalEvent.x||e.originalEvent.layerX||0;
});

可以参考我写的一个简单的菜单。
这个页面看上去动作还有点僵硬，是由于动画函数的问题。
关于动画函数，将在以后详细讲解。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>很好</title><style type="text/css" title="">* {padding: 0;margin: 0;}#menuWrap{top:100px;left:100px;width: 500px;height:120px;overflow:hidden;position:relative;background-color: #eee;border:1px solid #ccc;}#menuWrap ul{margin-top:10px;width: 1000px;}#menuWrap li{float:left;height:100px;width:98px;list-style:none;color:white;background-color: #64A7E4;border: 1px solid #4188CF;}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript"><!--jQuery(function($) {$("#menuWrap").mousemove(function(e) {var xx=e.originalEvent.x||e.originalEvent.layerX||0;var yy=e.originalEvent.y||e.originalEvent.layerY||0;if (xx<50) xx=50if ( xx > 450) xx=450$("#menu").stop(true).animate({"marginLeft":parseInt(0-(xx-50)/399*300)},600,"easeOutBack");});});jQuery.easing.easeOutBack=function (x, t, b, c, d, s) {if (s == undefined) s = 1.70158;return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;}//--></script></head><body><div id="menuWrap" class=""><ul id="menu"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul></div><a href="menu.rar">下载</a></body></html>

0 0