jQuery获取鼠标移动方向2
(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的更多相关文章
- jQuery获取鼠标移动方向
<!doctype html> <html> <head> <meta http-equiv="Content-Type&q ...
- 利用jQuery获取鼠标当前的坐标
文字来源:http://www.smalluv.com/jquery_code_106.html jQuery获取当前鼠标坐标位置: <div id="testDiv"> ...
- jquery 获取鼠标位置
//获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e. ...
- jquery 获取鼠标和元素的坐标点
获取当前鼠标相对img元素的坐标 $('img').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left; //获取当前 ...
- jQuery获取鼠标事件源(万能)
//任意位置 $(document).ready(function(){ $(document).click(function(){ $("#id_").hide(); }); } ...
- jquery 获取鼠标坐标
$("#x").text(event.pageX), $("#y").text(event.pageY);
- jq获取鼠标位置
jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- JQuery获取与设置HTML元素的值value
JQuery获取与设置HTML元素的值value 作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查 ...
- jquery实现鼠标焦点十字效果
系统开发时很多地方需要有焦点效果,例如:鼠标点击聚焦,地图定位,在图片上突出显示,焦点定位页面元素. 本小功能通过jquery和graphics二次开发,实现通过鼠标点击页面任何区域,聚焦当前点击位置 ...
随机推荐
- noj [1479] How many (01背包||DP||DFS)
http://ac.nbutoj.com/Problem/view.xhtml?id=1479 [1479] How many 时间限制: 1000 ms 内存限制: 65535 K 问题描述 The ...
- mysql procedure返回多数据集
返回多数据集写法:第一种 DROP PROCEDURE IF EXISTS `p_query_user` ; DELIMITER // CREATE PROCEDURE p_query_user( p ...
- js和Jquery获取选中select值和文本
<body> <select name="PaymentType" style="width:110px" > <option v ...
- Dynamic Programming (DP) 问题总结
所有的 DP 问题都可以简单得用 Recursion 的方式实现.这通常是最容易想到的思路. 问题是这种实现不够 efficient,存在 subproblem 被重复计算的情况.有两种解决这个问题的 ...
- Angular2经典文章集锦
Angular Metadata 等基础知识 http://www.jianshu.com/p/aeb11061b82c Metadata告诉Angular如何处理一个类,只有我们将它通告给Angul ...
- Python图形图像处理库的介绍之Image模块
http://onlypython.group.iteye.com/group/wiki/1372-python-graphics-image-processing-library-introduce ...
- 实现SELECT的全选,反选,AB选的JAVASCRIPT代码
参考网上,用原生JS粗糙实现. 我发现用UIKIT的BUTTON会自动刷新我那核心的模态窗口,只好用另外的LABEL或CODE标签了. $(".btn-select-all").c ...
- OCR识别流程
1.图像输入.预处理:图像输入:对于不同的图像格式,有着不同的存储格式,不同的压缩方式.预处理:主要包括二值化,噪声去除,倾斜较正等2.二值化:对摄像头拍摄的图片,大多数是彩色图像,彩色图像所含信息量 ...
- 对TCP/IP网络协议的深入浅出归纳(转)
前段时间做了一个开发,涉及到网络编程,开发过程比较顺利,但任务完成后始终觉得有一些疑惑.主要是因为对网络协议不太熟悉,对一些概念也没弄清楚.后来 我花了一些时间去了解这些网络协议,现在对TCP/IP网 ...
- VC多文档编程技巧(取消一开始时打开的空白文档)
VC多文档编程技巧(取消一开始时打开的空白文档) http://blog.csdn.net/crazyvoice/article/details/6185461 VC多文档编程技巧(取消一开始时打开的 ...