js根据鼠标方向划入遮罩层:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <style>
  8.     ul{
  9.         overflow:hidden;
  10.     }
  11.     .game-list{
  12.         float: left;
  13.         width:296px;
  14.         height:240px;
  15.         border: 1px solid #cdcdcd;
  16.         box-shadow: 0 10px 10px #e7e7e7;
  17.         margin-left: 93px;
  18.         margin-top:20px;
  19.         position: relative;
  20.         overflow: hidden;
  21.     }
  22.     .slidiv{
  23.         position: absolute;
  24.         height:240px;
  25.         width:296px;
  26.         background: rgba(9,9,9,0.5);
  27.         position: absolute;
  28.         left:-296px;
  29.         top:0;
  30.         text-align: center;
  31.         color: #FFFFFF;
  32.     }
  33.     a{
  34.         width:296px;
  35.         height:240px;
  36.         display: block;
  37.  
  38.     }
  39. </style>
  40. <body>
  41.     <div>
  42.        <ul>
  43.             <li class="game-list">
  44.                 <a href="#">3131</a>
  45.                 <div class="slidiv">
  46.                     <p>1</p>
  47.                 </div>
  48.             </li>
  49.         </ul>
  50.     </div>
  51. </body>
  52. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  53. <script>
  54. slidiv()
  55. function slidiv(){
  56.     $(".game-list").bind("mouseenter mouseleave",  function(e) {
  57.         var w = $(this).width();
  58.         var h = $(this).height();
  59.         //计算鼠标指针x,y位于当前元素比例的坐标位置
  60.         var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
  61.         var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
  62.         //得出四个方向的值（0，1，2，3）
  63.         var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
  64.  
  65.         this_slidiv = $(this).find('.slidiv');
  66.         if(e.type == 'mouseenter'){
  67.             switch(direction){
  68.                 case 0 :
  69.                     this_slidiv.css({top:-h,left:"0px"});
  70.                     break;
  71.                 case 1:
  72.                     this_slidiv.css({top:"0px",left:w});
  73.                     break;
  74.                 case 2:
  75.                     this_slidiv.css({top:h,left:"0px"});
  76.                     break;
  77.                 case 3:
  78.                     this_slidiv.css({top:"0px",left:-w});
  79.                     break;
  80.             }
  81.  
  82.             this_slidiv.stop(true,true).animate({"top":"0px","left":"0px"},"fast");
  83.  
  84.         }else if(e.type == 'mouseleave'){
  85.             switch(direction){
  86.                 case 0 :
  87.                     this_slidiv.stop(true,true).animate({"top":-h},"fast");
  88.                     break;
  89.                 case 1:
  90.                     this_slidiv.stop(true,true).animate({"left":w},"fast");
  91.                     break;
  92.                 case 2:
  93.                     this_slidiv.stop(true,true).animate({"top":h},"fast");
  94.                     break;
  95.                 case 3:
  96.                     this_slidiv.stop(true,true).animate({"left":-w},"fast");
  97.                     break;
  98.             }
  99.         }
  100.     });
  101. }
  102. </script>
  103. </html>

js根据鼠标方向划入遮罩层的更多相关文章

  1. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js实现弹出窗口+遮罩层+tab切换

    [功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...

  3. JS+CSS简单实现DIV遮罩层显示隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 有时候做JQ动画，鼠标经过，它会不停自己抖动不停，解决方法（此处，是兼容IE ，当鼠标经过，遮罩层从下移到上边的JQ动画效果）

    <style> .x_sdbb { margin: 60px 0 40px 0; } .x_title2{ background: url(../images/hdb_img17.png) ...

  5. 简单的ajax遮罩层（加载进度圈）cvi_busy_lib.js

    cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...

  6. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  7. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  8. 【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

    刚才在写一个界面,其中为了考虑背景图片的缘故,所以没用Button而是用的a标签 在点击之后应该禁用掉a元素,禁用对于button比较容易,加一个disabled就可以了 但是对于a却没有太好的办法, ...

  9. 转【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

    /*遮罩层代码 作用:通过遮罩层的方式防止表单提交次数过多 */ function MaskIt(obj){ var hoverdiv = '<div class="divMask&q ...

随机推荐

  1. POJ1144(割点入门题)

    Network Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 11378   Accepted: 5285 Descript ...

  2. CSharp读取配置文件的类(简单实现)

    Reinventing the wheel 系列 CSharp 读取配置文件的类 简单实现(注意没有写) 本人对CS 不是很熟,库也不熟,所以到网上找个实现,并自己添加了点异常.如果只是读取信息,足够 ...

  3. 关于UML图的生成

    想把一个java工程生成UML图非常简单,之前我的eclipse是4.2.0的,没有对应的GEF,所以我索性就直接把工程粘到了My Eclipse中,因为My Eclipse里面有UML自动生成的功能 ...

  4. web.xml中的<jsp-config>的用法详解

    <jsp-config> 包括<taglib> 和<jsp-property-group> 两个子元素. 其中<taglib>元素在JSP 1.2时就已 ...

  5. ABP启动流程分析

    添加服务与注册中间件 public IServiceProvider ConfigureServices(IServiceCollection services) { // Configure Abp ...

  6. Pseudo Random Nubmer Sampling

    Pseudo Random Nubmer Sampling https://en.wikipedia.org/wiki/Inverse\_transform\_sampling given a dis ...

  7. fastreport整理

    Q1:如何直接打印,不显示打印对话框? frxReport1.PrintOptions.ShowDialog := false; frxReport1.PrepareReport(true); frx ...

  8. IIS PHP的Loaded Configuration File为空解决[转]

    在Windows Server 2003上,IIS配置支持PHP,发现PHP扩展未加载,phpinfo()查看,显示 Configuration File (php.ini) Path (none) ...

  9. xgene：之ROC曲线、ctDNA、small-RNA seq、甲基化seq、单细胞DNA, mRNA

    灵敏度高 == 假阴性率低,即漏检率低,即有病人却没有发现出来的概率低. 用于判断:有一部分人患有一种疾病,某种检验方法可以在人群中检出多少个病人来. 特异性高 == 假阳性率低,即错把健康判定为病人 ...

  10. FZU2030 括号问题（dp）

    Problem 2030 括号问题 Accept: 398    Submit: 753Time Limit: 1000 mSec    Memory Limit : 32768 KB  Proble ...