获取鼠标坐标

最新推荐文章于 2021-05-27 00:31:28 发布

theowl

最新推荐文章于 2021-05-27 00:31:28 发布

阅读量406

点赞数

分类专栏： JQuery 文章标签： jquery

JQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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=50
				if ( 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>

theowl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取鼠标坐标

JQUERY中不为人知的秘密之一jQuery的向来以其完善的文档著称，而不像早期的Prototype那样库写的很牛，而文档很糟糕，其他使用者不得不看他的源码以了解一些功能。但是，不得不说，文档的更新速度是远没有其程序变化的快的。这个专题就是用于介绍一些隐藏在jQuery源码内部的事情。今天先揭秘2条1，序列化一个对象类似于Prototype中的$H(obj)
复制链接

扫一扫

专栏目录