(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. Logback 将日志分级别打印

    最近项目中用到了logback 记录日志,  关于为啥使用logback 请百度一下:  logback与Log4J的区别 好了,废话不多说,直奔主题, 研究了好久,终于将日志按级别将日志分文件打印出 ...

  2. 引擎渲染速度测试--我js代码写得少你不要骗我

    上一张图,很多人都看过的 地址:http://aui.github.io/artTemplate/test/test-speed.html 这个地址是在看artTemplate的时候看到的,很早都看过 ...

  3. 将cocos2dx项目从VS移植到Eclipse

    本文转自:http://www.cnblogs.com/Z-XML/p/3349518.html 引言:我们使用cocos2d-x引擎制作了一款飞行射击游戏,其中创新性地融入了手势识别功能.但是我们在 ...

  4. PHP file_get_contents() 函数

    定义和用法 file_get_contents() 函数把整个文件读入一个字符串中. 和 file() 一样,不同的是 file_get_contents() 把文件读入一个字符串. file_get ...

  5. Cppcheck 用法(上篇)

    http://blog.csdn.net/u011012932/article/details/52778149

  6. 《ArcGIS Engine+C#实例开发教程》第五讲 鹰眼的实现

    原文:<ArcGIS Engine+C#实例开发教程>第五讲 鹰眼的实现 摘要:所谓的鹰眼,就是一个缩略地图,上面有一个矩形框,矩形框区域就是当前显示的地图区域,拖动矩形框可以改变当前地图 ...

  7. 《ArcGIS Engine+C#实例开发教程》第二讲 菜单的添加及其实现

    原文:<ArcGIS Engine+C#实例开发教程>第二讲 菜单的添加及其实现 摘要:在上一讲中,我们实现了应用程序基本框架,其中有个小错误,在此先跟大家说明下.在“属性”选项卡中,我们 ...

  8. 商务部公开微软持有的Android技术专利

    微软与众多Android厂商签署了专利授权协议,但从来没有公开它持有多少项Android技术专利.出人意料的是,为了收购诺基亚手机业务,微软今年4月递交到中国商务部的文件中完整公开了它的Android ...

  9. JAVA bean与XML互转的利器---XStream

    最近在项目中遇到了JAVA bean 和XML互转的需求, 本来准备循规蹈矩使用dom4j忽然想起来之前曾接触过的XStream, 一番研究豁然开朗,利器啊利器, 下来就XStream的一些用法与大家 ...

  10. [HDU 1011] Starship Troopers

    Starship Troopers Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...