<!doctype html>
  <html>
   
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Demo</title>
  <style>
  * {
  margin: 0;
  padding: 0;
  }
   
  ul,
  li {
  list-style: none;
  }
   
  div {
  font-family: "Microsoft YaHei";
  }
   
  html,
  body {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  }
   
  ul {
  margin-left: 50px;
  }
   
  ul li {
  float: left;
  }
   
  ul li .outer {
  width: 300px;
  height: 250px;
  }
   
  ul li .outer .inner {
  width: 300px;
  height: 250px;
  background: rgba(0, 0, 0, .3);
  }
  </style>
  <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
  </head>
   
  <body>
  <ul>
  <li>
  <div class="outer">
  <img src="img/a1.png" width="300px" height="250px" />
  <div class="inner">
  这是描述。。。
  </div>
  </div>
  </li>
  <li>
  <div class="outer">
  <img src="img/a2.png" width="300px" height="250px" />
  <div class="inner">
  这是描述。。。
  </div>
  </div>
  </li>
  <li>
  <div class="outer">
  <img src="img/a3.png" width="300px" height="250px" />
  <div class="inner">
  这是描述。。。
  </div>
  </div>
  </li>
  <li>
  <div class="outer">
  <img src="img/a4.png" width="300px" height="250px" />
  <div class="inner">
  这是描述。。。
  </div>
  </div>
  </li>
  <li>
  <div class="outer">
  <img src="img/a5.png" width="300px" height="250px" />
  <div class="inner">
  这是描述。。。
  </div>
  </div>
  </li>
  <li>
  <div class="outer">
  <img src="img/a6.png" width="300px" height="250px" />
  <div class="inner">
  这是描述。。。
  </div>
  </div>
  </li>
  <li>
  <div class="outer">
  <img src="img/a7.png" width="300px" height="250px" />
  <div class="inner">
  这是描述。。。
  </div>
  </div>
  </li>
  <li>
  <div class="outer">
  <img src="img/a8.png" width="300px" height="250px" />
  <div class="inner">
  这是描述。。。
  </div>
  </div>
  </li>
  </ul>
   
  <script>
  ;
  (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的内部
  */
   
   
  $(".outer").each(function(i){
  $(this).show($(".inner").eq(i));
  });
  </script>
  </body>
   
  </html>
   

jQuery获取鼠标移动方向的更多相关文章

  1. jQuery获取鼠标移动方向2

    (function($) { $.fn.extend({ show: function(div) { var w = this.width(), h = this.height(), xpos = w ...

  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. Java编程思想（2）之一切皆对象

  2. CF 279A. Point on Spiral

    http://codeforces.com/problemset/problem/279/A 题意 :就是给你一个螺旋形的图,然后给你一个点,问从(0,0)点到这个点需要转几次弯,当然,是按着这个螺旋 ...

  3. Maven引入依赖后自动下载并关联源码(Source)

    好多用 Maven 的时候会遇到这样一个棘手的问题: 就是添加依赖后由于没有下载并关联源码,导致自动提示无法出现正确的方法名,而且不安装反编译器的情况下不能进入方法内部看具体实现 . 其实 eclip ...

  4. activity的测试工程activiti-explorer使用

    1. activiti-explorer默认使用h2数据库,第一步要修改db.properties的配置,如果使用其他数据库的话,务必放入驱动包,oracle的ojdbc4不能用,会报错,要使用版本高 ...

  5. ANDROID_MARS学习笔记_S01原始版_020_Mp3player001_歌曲列表

    一.项目设计 二.歌曲列表简介 1.利用java.net.HttpURLConnection以流的形式下载xml文件为String 2.自定义ContentHandler-->Mp3ListCo ...

  6. plsql 书写命名规范

    俗话说事不预则废,无规矩不成方圆. 对sql脚本程序的设计,个人认为应该是从编码规范开始. 前段时间公司一些同事提交的脚本,风格迥异,让我审核起来倍感难受,丝毫没有审核代码的快感. 特整理了公司部分常 ...

  7. 宣布 Azure Backup 支持备份 Windows Server 2008

    Giridhar Mosay 云 + Enterprise项目经理  AzureBackup已支持最新的 Windows Server 操作系统,例如 Windows Server 2008R2. ...

  8. 【转】was mutated while being enumerated 你是不是以为你真的懂For...in... ??

    原文网址:http://www.jianshu.com/p/ad80d9443a92 支持原创,如需转载, 请注明出处你是不是以为你真的懂For...in... ??哈哈哈哈, 我也碰到了这个报错 . ...

  9. 教你如何通过ICCID找回丢失的的iPhone

    22日晚买了FACETIME,在某宝上买的.价格不贵,可以查到偷手机的人注册FT的号码,还可以查询手机被刷机和被维修的日期(这个很关键) 27日手机被刷机,遂买了某宝查询ICCID的服务,找到一串IC ...

  10. POJ2236 Wireless Network 并查集

    水题 #include<cstdio> #include<cstring> #include<queue> #include<set> #include ...