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二次开发,实现通过鼠标点击页面任何区域,聚焦当前点击位置 ...
随机推荐
- Mongodb使用总结
学习Mongodb已经有半年多了,为啥学习它,工作需要啊.好了,废话不说,总结在实际项目应用中的几点问题. 学习总结 首先,mongodb基本上既照顾到了sql某些语法,又有nosql的许多优点.入门 ...
- ZOJ 3705 Applications
点我看题目 题意 : 真是一道又臭又长的模拟题啊,不过比赛的时候没看,赛完了补的. 给你N个候选人,让你从中选M个候选人,根据四个大规则来确定每个人的分数,然后选分数前M个人的输出. 1.在MOJ上做 ...
- codeforces Winner
/* * Winner.cpp * * Created on: 2013-10-13 * Author: wangzhu */ /** * 先找出所有选手的分数和中最大的分数和,之后在所有选手的分数和 ...
- [Unity菜鸟] Mecanim 系统遇到的问题
1. 给角色添加一个Animator组件和New State,运行后,摆出这种奇怪的姿势 这是因为没有把动画片段赋给New State,可以看到此时的New State为空,把Idle片段拖进去就好了 ...
- Spring事务传播特性的浅析——事务方法嵌套调用的迷茫
Spring事务传播机制回顾 Spring事务一个被讹传很广说法是:一个事务方法不应该调用另一个事务方法,否则将产生两个事务.结果造成开发人员在设计事务方法时束手束脚,生怕一不小心就踩到地雷. 其实这 ...
- wcf service library
创建wcf服务库的时候,系统自动生成的代码 // 注意: 使用“重构”菜单上的“重命名”命令,可以同时更改代码和配置文件中的接口名“IService1”. [ServiceContract] publ ...
- Tolerance (定义发票允差)
(N) AP > Setup > Invoice > Tolerance (定义发票允差) 这里只对价格进行了设置,其他保持了默认.To set tolerance levels f ...
- Hadoop中两表JOIN的处理方法
Dong的这篇博客我觉得把原理写的很详细,同时介绍了一些优化办法,利用二次排序或者布隆过滤器,但在之前实践中我并没有在join中用二者来优化,因为我不是作join优化的,而是做单纯的倾斜处理,做joi ...
- mapreduce: 揭秘InputFormat--掌控Map Reduce任务执行的利器
随着越来越多的公司采用Hadoop,它所处理的问题类型也变得愈发多元化.随着Hadoop适用场景数量的不断膨胀,控制好怎样执行以及何处执行map任务显得至关重要.实现这种控制的方法之一就是自定义Inp ...
- BZOJ2553: [BeiJing2011]禁忌
2553: [BeiJing2011]禁忌 Time Limit: 20 Sec Memory Limit: 128 MBSec Special JudgeSubmit: 203 Solved: ...