(function($) {
$.fn.extend({
show: function(div) {
var w = this.width(),
h = this.height(),
xpos = w / 2,
ypos = h / 2,
eventType = "",
direct = "";
this.css({
"overflow": "hidden",
"position": "relative"
});
div.css({
"position": "absolute",
"top": this.width()
});
this.on("mouseenter mouseleave", function(e) {
var oe = e || event;
var x = oe.offsetX;
var y = oe.offsetY;
var angle = Math.atan((x - xpos) / (y - ypos)) * 180 / Math.PI;
if (angle > -45 && angle < 45 && y > ypos) {
direct = "down";
}
if (angle > -45 && angle < 45 && y < ypos) {
direct = "up";
}
if (((angle > -90 && angle < -45) || (angle > 45 && angle < 90)) && x > xpos) {
direct = "right";
}
if (((angle > -90 && angle < -45) || (angle > 45 && angle < 90)) && x < xpos) {
direct = "left";
}
move(e.type, direct)
}); function move(eventType, direct) {
if (eventType == "mouseenter") {
switch (direct) {
case "down":
div.css({
"left": "0px",
"top": h
}).stop(true, true).animate({
"top": "0px"
}, "fast");
break;
case "up":
div.css({
"left": "0px",
"top": -h
}).stop(true, true).animate({
"top": "0px"
}, "fast");
break;
case "right":
div.css({
"left": w,
"top": "0px"
}).stop(true, true).animate({
"left": "0px"
}, "fast");
break;
case "left":
div.css({
"left": -w,
"top": "0px"
}).stop(true, true).animate({
"left": "0px"
}, "fast");
break;
}
} else {
switch (direct) {
case "down":
div.stop(true, true).animate({
"top": h
}, "fast");
break;
case "up":
div.stop(true, true).animate({
"top": -h
}, "fast");
break;
case "right":
div.stop(true, true).animate({
"left": w
}, "fast");
break;
case "left":
div.stop(true, true).animate({
"left": -w
}, "fast");
break;
}
}
}
}
});
})(jQuery)
/*
*使用说明:
* $(".a").show($(".b"))
* a是展示层,b是遮罩层
* b在a的内部
*/ $(".case li .list").each(function(i){
$(this).show($(".case .list-wrap .wrap").eq(i));
});

jQuery获取鼠标移动方向2的更多相关文章

  1. jQuery获取鼠标移动方向

      <!doctype html>   <html>       <head>   <meta http-equiv="Content-Type&q ...

  2. 利用jQuery获取鼠标当前的坐标

    文字来源:http://www.smalluv.com/jquery_code_106.html jQuery获取当前鼠标坐标位置: <div id="testDiv"> ...

  3. jquery 获取鼠标位置

    //获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e. ...

  4. jquery 获取鼠标和元素的坐标点

    获取当前鼠标相对img元素的坐标 $('img').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left; //获取当前 ...

  5. jQuery获取鼠标事件源(万能)

    //任意位置 $(document).ready(function(){ $(document).click(function(){ $("#id_").hide(); }); } ...

  6. jquery 获取鼠标坐标

    $("#x").text(event.pageX), $("#y").text(event.pageY);

  7. jq获取鼠标位置

    jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. JQuery获取与设置HTML元素的值value

    JQuery获取与设置HTML元素的值value 作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查 ...

  9. jquery实现鼠标焦点十字效果

    系统开发时很多地方需要有焦点效果,例如:鼠标点击聚焦,地图定位,在图片上突出显示,焦点定位页面元素. 本小功能通过jquery和graphics二次开发,实现通过鼠标点击页面任何区域,聚焦当前点击位置 ...

随机推荐

  1. 关于github在mac 10.10上无法提交代码的解决办法---备用

    接下来是正文:本文主要说明在mac 10.10版本下github无法提交代码的问题 首先如果你是一个用终端提交代码的,你可以不用看这篇文章了,这篇文章主要是用于解决github客户端提交代码的问题,此 ...

  2. WindowsPhone客户端第一次审核失败记录

    微软返回失败pdf,其中2.7.2和2.7.3没有通过,原因是: 1. 没有提供隐私策略,所以在提交App要填写的隐私策略url里加了隐私策略的网址链接. 2. 由于使用了定位服务,所以第一次进入应用 ...

  3. 'InitializeCulture' is not a member of 'XXXX'

    今天在部署ASP.NET网页时出现一个奇怪的问题.在开发,调试时访问网页一切正常.但一部署到IIS中时就会出现以下的错误信息:'InitializeCulture' is not a member o ...

  4. Javascript事件传播

    MicroSoft的设计是当事件在元素上触发时,该事件将接着在该节点的父节点触发,以此类推,事件一直沿着DOM树向上传播,直到到达顶层对象document元素.这种自底向上的事件传播方式称为" ...

  5. 异常: http://www.ly.com/news/visa.html: java.io.IOException: unzipBestEffort returned null

    nutch 运行时异常: http://www.ly.com/news/visa.html: java.io.IOException: unzipBestEffort returned null 参考 ...

  6. ZOJ 3705 Applications

    点我看题目 题意 : 真是一道又臭又长的模拟题啊,不过比赛的时候没看,赛完了补的. 给你N个候选人,让你从中选M个候选人,根据四个大规则来确定每个人的分数,然后选分数前M个人的输出. 1.在MOJ上做 ...

  7. 通过navicat连接mysql服务器提示SQL Error (1130): Host '192.168.1.100' is not allowed to connect to this MySQL server

    新装一个mysql,尝试用通过navicat连接mysql服务器的时候提示: SQL Error (1130): Host '192.168.1.100' is not allowed to conn ...

  8. USB 枚举过程详解

    Windows 对USB设备的枚举过程流程图如图1所示: 图1 WP8的USB功能只支持一个配置,三个接口,也就是分别有如下的字段: 设备描述符的bNumConfigurations=1, 配置描述符 ...

  9. Delphi编写自定义控件以及接口的使用(做了一个TpgDbEdit)

    写给觉得自己编写Delphi很复杂的人,包括自己. Delphi自己写控件其实并不难,难的在于开发复杂的控件.(其实,编程,很多东西都是会了就不难,因此,我怕自己日后觉得自己写控件很难,特意在这记录自 ...

  10. 【Linux安全】防止 root 用户远程登录

    防止 root 用户远程登录,在终端输入以下命令: vim /etc/ssh/sshd_config 修改如下行为:no PermitRootLogin no 如图所示: