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二次开发,实现通过鼠标点击页面任何区域,聚焦当前点击位置 ...
随机推荐
- Pentaho Data Integration笔记 (四):Kitchen
官方网站: http://wiki.pentaho.com/display/EAI/Kitchen+User+Documentation Kitchen Kitchen是一个可以执行Spoon编辑的J ...
- lettcode-102:Binary Tree Level Order Traversal (Java)
Binary Tree Level Order Traversal 二叉树的层序遍历 两种方式: 1.用两个queue交替表示每一层的节点 2.用两个node,一个表示当前层的最后一个节点,一个表示下 ...
- spring framework 各版本源码下载地址
现在spring的源码下载地址真是不好找,这次终于找到了.记录一下,以帮助需要的朋友. https://github.com/spring-projects/spring-framework/tags ...
- 如何使用 Java8 实现观察者模式?(下)
[编者按]本文作者是 BAE 系统公司的软件工程师 Justin Albano.在本篇文章中,作者通过在 Java8 环境下实现观察者模式的实例,进一步介绍了什么是观察者模式.专业化及其命名规则,供大 ...
- Struts2 interceptor使用经验小结
1. interceptor 调用Spring容器中的bean 在interceptor中常有需要调用Spring Bean的需要,其实很简单和Struts2的Action一样配置即可. Spring ...
- SPRING IN ACTION 第4版笔记-第六章RENDERING WEB VIEWS-002- Spring的JSP标签之form标签(<sf:input><sf:errors><sf:form>)
一. Spring offers two JSP tag libraries to help define the view of your Spring MVC web views. One tag ...
- QString内部仍采用UTF-16存储数据且不会改变(一共10种不同情况下的编码)
出处:https://blog.qt.io/cn/2012/05/16/source-code-must-be-utf-8-and-qstring-wants-it/ 但是注意,这只是QT运行(Run ...
- 图片缩放时java.lang.IllegalArgumentException: pointerIndex out of range解决方案
版权声明:本文为博主原创文章,未经博主允许不得转载. 06-03 20:45:24.143: E/AndroidRuntime(1230): FATAL EXCEPTION: main06-03 20 ...
- dojo 图表制作教程
http://www.sitepen.com/labs/code/charting/tutorial/tutorial1.html http://www.sitepen.com/labs/code/c ...
- CP_THREAD_ACP与CP_ACP
在使用MultiByteToWideChar的时候,大部分都知道上述两个参数,MSDN上的解释也是简单到极致.通常我们会选择使用CP_ACP,但是总有人会在没有真正明白它们之间的区别前使用CP_THR ...