找回密码
当前位置：前端开发者 > JavaScript > 正文

Web前端根据鼠标方向划入遮罩层

2018-10-13 分类：JavaScript 阅读(852) 评论(0)

前端开发必备技能 web前端开发专业技能 web前端开发专业技能介绍
可能再ie8 上面会不支持bind方法
html 代码

<!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>

//让ie 89 支持bind方法
javascript 代码

//让ie 89 支持bind
if (!Function.prototype.bind) {
    Function.prototype.bind = function(oThis) {
        if (typeof this !== ‘function’) {
            throw new TypeError(
                ‘Function.prototype.bind – what is trying to be bound is not callable’,
            )
        }
        var aArgs = Array.prototype.slice.call(arguments, 1),
            fToBind = this,
            fNOP = function() {},
            fBound = function() {
                return fToBind.apply(
                    this instanceof fNOP && oThis ? this : oThis,
                    aArgs.concat(Array.prototype.slice.call(arguments)),
                )
            }
        fNOP.prototype = this.prototype
        fBound.prototype = new fNOP()
        return fBound
    }
}
web前端开发所需技能
前端开发要掌握的技能
前端掌握开发技能描述
赞(0)
前端开发者 » Web前端根据鼠标方向划入遮罩层
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论