<!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实现数字水印（可见）

    数字水印有可见不可见之分,可见的比如课件上印有学校校徽,微博发图片会水印上上传者的信息及微博logo等. 用java实现可见的数字水印,草人主要是用到了java.awt包中的AlphaComposit ...

  2. Hadoop集群系类文章

    http://www.cnblogs.com/xia520pi/archive/2012/04/08/2437875.html 后续文章地址:http://www.xiapistudio.com/ta ...

  3. 用 Maven 做项目构建

    转自:http://www.ibm.com/developerworks/cn/java/j-lo-maven/index.html 本文将介绍基于 Apache Maven 3 的项目构建的基本概念 ...

  4. poj 1811 Prim test

    基本上一个裸的Miller_Rabin大素数判定和一个裸的Pollard_rho素数分解算法,当模板用吧! #include<cstdio> #include<algorithm&g ...

  5. HDU 1003 Max Sum（DP）

    点我看题目 题意 : 就是让你从一个数列中找连续的数字要求他们的和最大. 思路 : 往前加然后再判断一下就行. #include <iostream> #include<stdio. ...

  6. 【NOIP 2015 DAY2 T3】 运输计划 （树链剖分-LCA）

    题目背景 公元 2044 年,人类进入了宇宙纪元. 题目描述 L 国有 n 个星球,还有 n-1 条双向航道,每条航道建立在两个星球之间,这 n-1 条航道连通了 L 国的所有星球. 小 P 掌管一家 ...

  7. Web Service学习笔记（webservice、soap、wsdl、jws详细分析)

    Web Service概述 Web Service的定义 W3C组织对其的定义如下,它是一个软件系统,为了支持跨网络的机器间相互操作交互而设计.Web Service服务通常被定义为一组模块化的API ...

  8. VJP1100 加分二叉树（树形DP）

    链接 归属树形DP  做着更像记忆化 DP很好做 就是那个输出路径恶心了..改代码 从60多行改到120多行..dp从1维加到三维.. 先类似记忆化搜索整棵树 枚举以i为根节点的最大值 子树类似 求完 ...

  9. -fembed-bitcode is not supported on versions of iOS prior to 6.0 问题修复

    参考一下网址 http://stackoverflow.com/questions/30867544/fembed-bitcode-is-not-supported-on-versions-of-io ...

  10. OpenSSL 拒绝服务漏洞

    漏洞名称: OpenSSL 拒绝服务漏洞 CNNVD编号: CNNVD-201312-058 发布时间: 2013-12-05 更新时间: 2013-12-05 危害等级:    漏洞类型:   威胁 ...