jQuery获取鼠标移动方向

  <!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>
   
时间： 2024-10-18 14:43:17

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

jQuery获取鼠标移动方向2

(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": "relat

jquery 获取鼠标位置

//获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e.clientX + document.body.scroolLeft; __yy = e.pageY || e.clientY + document.body.scrollTop; }); }); 原文地址:https://www.cnblogs.com/azhqiang/p/10876958.ht

jquery 获取鼠标和元素的坐标点

获取当前鼠标相对img元素的坐标 $('div').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left; //获取当前鼠标相对div的X坐标 varpositionY=e.pageY-$(this).offset().top; //获取当前鼠标相对div的Y坐标 console.log(positionX+' '+positionY); }) 获取当前鼠标相对浏览器的原点的坐标 $('div').mousemove

获取鼠标和元素的坐标点

HTML: <div id="main">获取坐标</div> <div id="fixed_box"></div> 1,jquery 获取鼠标坐标点 a ,获取当前鼠标相对html页面的原点的坐标 $("#main").click(function(e) { var pageX = e.pageX; var pageY = e.pageY; console.log(pageX, pageY) })

基于JQuery的获取鼠标进入和离开容器方向的实现

基于JQuery的获取鼠标进入和离开容器方向的实现 做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>判断鼠标从哪个方向进入和离开容器</title&g

js获取鼠标坐标位置兼容多个浏览器

这个看似简单的获取坐标功能,可是已经花费我一天时间了,白天一直搜索js获取坐标,找了很多很多,一一检验,结果出现不兼容.真的够烦躁了,但是事情还是要继续,要完成,回来又继续实践,搜索,反复操作,发现自己好多不会呀,特别是jquery自定义方法(函数),根本就不会,很欠缺基础,心里暗暗下决心,弄完这个好好学习一下js,不然老是卡在这方面.时间虽然已经过去很久了,但我还是没有放弃,想想换个关键词搜索一下,是不是可以找到我想要的.搜索“js获取坐标兼容ie8”,一下子出现后几条,于是挑选一个实践,改造

jquery获取自定义属性(attr和prop)实例介绍

jquery获取自定义属性(attr和prop)实例介绍 作者: 字体:[增加 减小] 类型:转载 jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式 $("form").attr("check"); $("form").prop("check"); 两种都可以,不过新版jquery推荐第二种,两个在其他

jQuery模拟鼠标点击事件失效的问题

最近使用jQuery操作浏览器获取数据,需要对分页的信息进行处理,发现直接使用$('div#pager a.next').click();的这种写法无法触发点击事件. 使用trigger('click')的写法也是无济于事. 在网上一顿扒拉后,发现使用$('div#pager a.next')[0].click();就OK了. $('div#pager a.next')[0]这种写法其实就相当于把jQuery对象转换为Dom对象了. 模拟点击不生效的原因 如果使用jQuery的写法:$('a#t

获取鼠标的当前位置

1.JQ获取鼠标的当前位置 $('#div1').mousemove(function(e){ var xx=e.originalEvent.x || e.originalEvent.layerX || 0; var yy=e.originalEvent.y || e.originalEvent.layerY || 0; $(this).text(xx+','+yy); } ) //jquery中event.originalEvent指向事件原始对象 2.原生JS获取当前鼠标位置 关键是在onm