<!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. iOS8上放大缩小的动画

    CGAffineTransformMakeScale这个方法我们以前经常使用,但是在IOS8上出现问题了 [UIView animateWithDuration:0.3 animations:^{ b ...

  2. noj [1480] 懒惰的风纪委Elaine (多重背包)

    http://ac.nbutoj.com/Problem/view.xhtml?id=1480 [1480] 懒惰的风纪委Elaine 时间限制: 1000 ms 内存限制: 65535 K 问题描述 ...

  3. 使用代理下载Android SDK

    hx.gy:1080是红杏公益服务器,方便科学工作者访问一些常用的科学网站. 在Android SDK Manager中选择[Tools]->[Options],如下设置: HTTP Proxy ...

  4. VS Extension: Create a txt file and set the content

    使用 Visual Studio Extension 创建一个文本文件,并填入内容. 需要引用 EnvDTE C:\Program Files (x86)\Microsoft Visual Studi ...

  5. js正则匹配查找

    var pattern1 = /好/g; console.log(pattern1.test("你好")); 字符串查找: var pattern1 = /\w/; console ...

  6. java连接oracle数据库的实现代码

    package connectionOracleDatabase; import java.sql.Connection; import java.sql.DatabaseMetaData; impo ...

  7. Java Web 前端高性能优化（二）

    一.上文回顾 上回我们主要从图片的合并.压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)) 本次我们主要从图像BASE64 编码.GZIP压缩.懒加载与预加载以及 OneAP ...

  8. MYSQL SHOW VARIABLES简介

    原文地址:http://www.2cto.com/database/201108/100546.html mysqld服务器维护两种变量.全局变量影响服务器的全局操作.会话变量影响具体客户端连接相关操 ...

  9. NEERC 2010, Eastern subregional contest

    只能把补了的题目放这儿了,先留个坑,怕忘记. Problem G URAL 1806 Mobile Telegraphs 题意是:给定n个电话号码,每个号码是一个长度为10的仅含'0'~'9'的字符串 ...

  10. SQLite入门与分析(八)---存储模型(1)

    写在前面:SQLite作为嵌入式数据库,通常针对的应用的数据量相对于通常DBMS的数据量是较小的.所以它的存储模型设计得非常简单,总的来说,SQLite把一个数据文件分成若干大小相等的页面,然后以B树 ...