jquery获取鼠标移动距离方向

Html

Css

* {
	margin:0;
	padding:0;
}
.box {
	width:100%;
	height:500px;
	text-align:center;
	line-height:250px;
	font-size:50px;
	font-weight:bold;
	color:#b22222;
	background:#ccc;
}

$(function() {
    var oXArr = [];
    var oYArr = [];
    var rightArr = [];
    var leftArr = [];
    var topArr = [];
    var downArr = [];
    var rightMoveL;
    var leftMoveL;
    var downMoveL;
    var upMoveL;

var oTop = $('.box-top');
    var oBot = $('.box-bot');
    var mouse = $('.mouse');
    $(".box").mousemove(function(e) {
        var obxX = e.pageX;
        var obxY = e.pageY;
        oXArr.unshift(obxX);
        oYArr.unshift(obxY);
        oXArr.splice(2, 1);
        oYArr.splice(2, 1);

// tfo();
        function tfo() {

if (oXArr[0] > oXArr[1]) {
                // console.log("向右");
                leftArr = [];
                rightArr.push(obxX);
                rightMoveL = Math.abs(rightArr[rightArr.length - 1] - rightArr[0]);

oTop.html("鼠标向右" + rightMoveL);

return true;
            } else {
                // console.log("向左");
                rightArr = [];
                leftArr.push(obxX);
                leftMoveL = Math.abs(leftArr[leftArr.length - 1] - leftArr[0]);

oTop.html("鼠标向左" + leftMoveL);
                return false;
            }
        }
        // tfw();
        function tfw() {
            if (oYArr[0] > oYArr[1]) {
                // console.log("向下");
                topArr = [];
                downArr.push(obxY);
                downMoveL = Math.abs(downArr[downArr.length - 1] - downArr[0]);
                oBot.html("鼠标向下" + downMoveL);
                return true;
            } else {
                // console.log("向上");
                downArr = [];
                topArr.push(obxY);
                upMoveL = Math.abs(topArr[topArr.length - 1] - topArr[0]);
                oBot.html("鼠标向上" + upMoveL);
                return false;
            }
        }
        if (tfo() && tfw()) {
            //右下
            // console.log("右下");
            mouse.html("鼠标向右下");

} else if (tfo() && !tfw()) {
            //右上
            // console.log("右上")
            mouse.html("鼠标向右上");

} else if (!tfo() && tfw()) {
            //左下
            mouse.html("鼠标向左下");

} else if (!tfo() && !tfw()) {
            //左上
            mouse.html("鼠标向左上");

}
    });
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

jquery获取鼠标移动距离方向



代码描述：jquery获取鼠标移动方向以及向这个方向移动的距离

利用jquery写的鼠标移动方向判断；

2

最新

发表评论全部评论

暂时没有评论！

玖?Fade.0

2017/8/16 11:18:11

如果box的width不是100%窗口宽，只需要减去box的左偏移量；上下也一样；

玖?Fade.0

2017/8/16 11:20:15

上面的发错了，没有删除吗？

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

玖?Fade.

相关代码

jquery获取鼠标移动距离方向

最新