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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style>

    ul{

        overflow:hidden;

    }

    .game-list{

        float: left;

        width:296px;

        height:240px;

        border: 1px solid #cdcdcd;

        box-shadow: 0 10px 10px #e7e7e7;

        margin-left: 93px;

        margin-top:20px;

        position: relative;

        overflow: hidden;

    }

    .slidiv{

        position: absolute;

        height:240px;

        width:296px;

        background: rgba(9,9,9,0.5);

        position: absolute;

        left:-296px;

        top:0;

        text-align: center;

        color: #FFFFFF;

    }

    a{

        width:296px;

        height:240px;

        display: block;

    }

</style>

<body>

    <div>

       <ul>

            <li class="game-list">

                <a href="#">3131</a>

                <div class="slidiv">

                    <p>1</p>

                </div>

            </li>

        </ul>

    </div>

</body>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

slidiv()

function slidiv(){

    $(".game-list").bind("mouseenter mouseleave",  function(e) {

        var w = $(this).width();

        var h = $(this).height();

        //计算鼠标指针x,y位于当前元素比例的坐标位置

        var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);

        var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);

        //得出四个方向的值（0，1，2，3）

        var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

        this_slidiv = $(this).find('.slidiv');

        if(e.type == 'mouseenter'){

            switch(direction){

                case 0 :

                    this_slidiv.css({top:-h,left:"0px"});

                    break;

                case 1:

                    this_slidiv.css({top:"0px",left:w});

                    break;

                case 2:

                    this_slidiv.css({top:h,left:"0px"});

                    break;

                case 3:

                    this_slidiv.css({top:"0px",left:-w});

                    break;

            }

            this_slidiv.stop(true,true).animate({"top":"0px","left":"0px"},"fast");

        }else if(e.type == 'mouseleave'){

            switch(direction){

                case 0 :

                    this_slidiv.stop(true,true).animate({"top":-h},"fast");

                    break;

                case 1:

                    this_slidiv.stop(true,true).animate({"left":w},"fast");

                    break;

                case 2:

                    this_slidiv.stop(true,true).animate({"top":h},"fast");

                    break;

                case 3:

                    this_slidiv.stop(true,true).animate({"left":-w},"fast");

                    break;

            }

        }

    });

}

</script>

</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. bzoj 2865 字符串识别 —— 后缀数组

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2865 唯一出现的子串就是每个后缀除去和别的后缀最长的 LCP 之外的前缀: 所以用这个更新一 ...

  2. Python3解leetcode Linked List Cycle

    问题描述: Given a linked list, determine if it has a cycle in it. To represent a cycle in the given link ...

  3. Nuget-QRCode：QRCoder

    ylbtech-Nuget-QRCode:QRCoder 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https://github.com/codebu ...

  4. hadoop编码问题，mapreduce中Tex与string的转化 乱码问题

    引用:http://blog.csdn.net/zklth/article/details/11829563 Hadoop处理GBK文本时,发现输出出现了乱码,原来HADOOP在涉及编码时都是写死的U ...

  5. python3中，pycharm中怎么连接数据库

    因为python3现在还不能直接连接数据库,所有如果想连接,就只能通过以下方法: 在APP中的,__init__.py中,添加以下代码就可以: import pymysql pymysql.insta ...

  6. Spring入门第二十一课

    切面优先级 先看代码: package logan.study.aop.impl; public interface ArithmeticCalculator { int add(int i, int ...

  7. shell程序---编译目录下全部.c或.cpp文件

    今天大波又提起昨天我说的那个程序.这样的,起初我想写一个makefile,每次写完新代码后一键编译目录下所有的.cpp文件. 原因是用makefile的话,每次要把目标文件加紧去才能编译.感觉不方便. ...

  8. UVaLive 4256 Salesmen (简单DP)

    题意:给一个无向连通图,和一个序列,修改尽量少的数,使得相邻两个数要么相等,要么相邻. 析:dp[i][j] 表示第 i 个数改成 j 时满足条件.然后就很容易了. 代码如下: #pragma com ...

  9. Eclipse与IntelliJ IDEA区别

    1.没有workspace,新增modules(Workspace-Project,Project-Module) 2.没有perspectives,自动根据上下文调用相关工具 3.没有保存按钮,自动 ...

  10. Java负数的位运算

    /** * 求负数的位运算 *///1. -10 >> 2 = ?//2. -10的原码: 1000 0000 0000 0000 0000 0000 0000 1010 最高位代表符号位 ...