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二次开发,实现通过鼠标点击页面任何区域,聚焦当前点击位置 ...
随机推荐
- 玩转AWS CloudWatch微信告警
做海外业务时大多使用亚马逊 AWS 服务,配套AWS 监控 CloudWatch 功能强大,如果能和微信结合就更棒了.现在分享下如何玩转 CloudWatch 微信通知. AWS EC2 云主机配套的 ...
- DJANGO模板的BLOCK自定义技巧
除了INCLUDE, EXTENDS基本的继承模板之外,如果想在本模板上,直接生成让同类页面继承的模板, 则可以需要自定义的地方实现自定义BLOCK, 先在本页面实现自己的BLOCK,然后,在继承的页 ...
- IDEA 使用 SVN的一个注意点
IDEA是调用SVN.EXE来实现相关版本管理功能的,所以必须要安装visualSVN,然后再使用相关功能!
- MongoDB实战指南(六):MongoDB复制集之复制集概述
1. 复制集概述 数据库总是会遇到各种失败的场景,如网络连接断开.断电等,尽管journaling日志功能也提供了数据恢复的功能,但journaling通常是针对单个节点来说的,只能保证单节点数据的一 ...
- DHTMLX 前端框架 建立你的一个应用程序 教程(八)-- 添加表单Form
添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮 可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...
- 【Xamarin挖墙脚系列:Xamarin.IOS机制原理剖析】
原文:[Xamarin挖墙脚系列:Xamarin.IOS机制原理剖析] [注意:]团队里总是有人反映卸载Xamarin,清理不完全.之前写过如何完全卸载清理剩余的文件.今天写了Windows下的批命令 ...
- Android Touch事件传递机制
1.基础知识 (1) 所有Touch事件都被封装成了MotionEvent对象,包括Touch的位置.时间.历史记录以及第几个手指(多指触摸)等. (2) 事件类型分为ACTION_DOWN, ACT ...
- JS 中Promise 模式
异步模式在web编程中变得越来越重要,对于web主流语言Javscript来说,这种模式实现起来不是很利索,为此,许多Javascript库(比如 jQuery和Dojo)添加了一种称为promise ...
- leetcode面试准备:Add and Search Word - Data structure design
leetcode面试准备:Add and Search Word - Data structure design 1 题目 Design a data structure that supports ...
- 【Quick 3.3】资源脚本加密及热更新(二)资源加密
[Quick 3.3]资源脚本加密及热更新(二)资源加密 注:本文基于Quick-cocos2dx-3.3版本编写 一.介绍 在前一篇文章中介绍了代码加密,加密方式是XXTEA.对于资源文件来说,同样 ...