<!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. Windows 2008 故障转移群集介绍

    转载:http://dufei.blog.51cto.com/382644/902026 今天有客户问起Windows 群集的相关内容,毕竟Windows Server2008所支持的群集技术和Win ...

  2. ASP.net 的URL路由选择(System.Web.Routing.dll)

    System.Web.Routing是.net 3.5sp1中新增的一个dll,用它提拱的类可以很方便的实现url的映射,在asp.net WebFrom的编程中可以使客户端请求的URL变得更加的&q ...

  3. cs ip 通过jmp转移命令间接赋值。无法直接对其赋值。

    jmp 寄存器 命令 对IP间接赋值.

  4. 利用动软代码生成器 自动生成LINQ需要用的数据实体类 (转)

    首先先建立一个模板 名称随意 我起的“生成数据实体.cmt” 代码如下: <#@ template language="c#" HostSpecific="True ...

  5. VC 透明滑动控件Slider Control

    操作系统:Windows 7软件环境:Visual C++ 2008 SP1本次目的:为滑动控件设置背景透明 经常在编写有背景的程序时,滑动控件Slider Control看起来与背景十分不合,我们可 ...

  6. 【HDOJ】1709 The Balance

    母函数,指数可以为1也可以为-1,扩大指数加消减发现TLE,于是采用绝对值就过了. #include <stdio.h> #include <string.h> #define ...

  7. 【HDOJ】2062 Subset sequence

    这道题目非常好,饶了点儿圈子.我的思路是,先按照组排列.例如,1            2           31 2         2 1        3 11 2 3      2 1 3  ...

  8. 【HDOJ】1076 An Easy Task

    水题,如题. #include <stdio.h> #define chk(Y) (Y%4==0 && Y%100!=0) || Y%400==0 int main() { ...

  9. HTML5标签一览

    HTML5标签一览,点击下载 访问密码:1907

  10. 使用C#在word中插入页眉页脚

    //插入页脚 public void InsertFooter(string footer) { if (ActiveWindow.ActivePane.View.Type == WdViewType ...