Question

jquery 求大神解释以下这串代码是什么意思！

请问有大神在吗~ 求大神解释下面这串代码是什么意思 最好每段后面加个注释 谢谢~
$(function(){
$("#wrap").bind("mouseenter mouseleave",
function(e) {
var w = $(this).width();
var h = $(this).height();
var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
var eventType = e.type;
var dirName = new Array('上方','右侧','下方','左侧');
if(e.type == 'mouseenter'){
$(this).html(dirName[direction]+'进入');
}else{
$(this).html(dirName[direction]+'离开');
}
});
})

Answer 1

我习惯把每段的注释加在前面，还请见谅！！！

// 页面结构加载完成时要执行的函数
$(function(){
// 当 id 为 wrap 的元素上发生 鼠标进入 和鼠标离开 时，执行的函数
$("#wrap").bind("mouseenter mouseleave", function(e) {
var w = $(this).width(); // 获取当前元素的宽度
var h = $(this).height(); // 获取当前元素的高度
// 计算鼠标指针位于当前元素“比例空间”中的坐标位置（注：关于“比例空间”详见后面的说明）
var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
// 计算鼠标指针位于当前元素“比例空间”中的方位（注：0，1，2，3 分别代表 上，右，下，左）
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
var eventType = e.type; // 获取当前处理的事件类型（mouseenter 或 mouseleave 分别代表 进入 或 离开）
var dirName = new Array('上方','右侧','下方','左侧'); // 创建用来将方位代码翻译成汉语的数组
// 根据事件类型生成提示信息
if(e.type == 'mouseenter'){
$(this).html(dirName[direction]+'进入');
}else{
$(this).html(dirName[direction]+'离开');
}
});
})

上文中提到的元素“比例空间”是指：
以元素中心为坐标原点，
以元素左边位置为X轴的-1，
以元素右边位置为X轴的1，
以元素顶部位置为Y轴的-1，
以元素底部位置为Y轴的1，
的直角坐标空间。

还有什么问题，请继续追问。

追问

谢谢大神 请问http://www.pchouse.com.cn/这个网站轮播图下方的装修流程那一块地方是用这种方法做的吗？

追答

不是的，这个网站中你说的那个地方明显没有判断鼠标是从哪个方向进入、以及从哪个方向离开。

你可以试一下，鼠标从任何方向慢慢地离开，都不会有什么区分。

追问

请问它这个是怎么做的，鼠标向左滑过的时候那个绿色的块也是从左出现的 向右离开也是向右的，大神能不能留个qq小号。

追答

我又去那个网站试了一下，发现了以下规律：

1. 鼠标从哪个方向离开了方框，绿色方块就将会向哪个方向移动

   由此可见，他确实判断了鼠标离开时的方向。

2. 鼠标离开方框时，绿色方块并不立刻移动，而是等到鼠标进入了其它方框时，才会移动

   由此可见，鼠标进入某一方框的事件，是处理其它方框中绿色方块移动的事件。

3. 绿色方块的移动量与鼠标离开方框事件与上一个鼠标离开方框事件的时间间隔有关（似乎是成正比）。

根据这些规律应该可以编出相应的程序了。

290212376