故如虹,知恩;故如月,知明
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术

js键盘移动div与背景滚动效果

4933人阅读 2019/8/30 11:13 总访问:3839278 评论:0 收藏:0 手机
分类: Js相关

通过键盘按下事件记录按键

如果按下的时候就去移动div位置,就不能使用组合键了,不能让div斜着走了,所以只做一个按键记录就好了

//存储按键
var keycodes = {};
$(document).keydown(function (event) {
    keycodes[event.keyCode] = true;
});
$(document).keyup(function (event) {
    keycodes[event.keyCode] = false;
});

然后使用一个setInterval刷新位置即可

//刷新地图
setInterval(function () {
    var top = parseInt($("#div1").css("top"));
    var left = parseInt($("#div1").css("left"));

    if (keycodes[87]) {
        $("#div1").css("top", top - 15);
    }
    if (keycodes[65]) {
        $("#div1").css("left", left - 15);
    }
    if (keycodes[68]) {
        $("#div1").css("left", left + 15);
    }
    if (keycodes[83] == true) {
        $("#div1").css("top", top + 15);
    }
    if (keycodes[75] == true) {

    }
}, 50);

背景滚动效果:

//地图滚动
var py = 0;
var gamerun = function () {
    py = py + 2;
    $("#gamemap").animate({ "background-position-y": py }, 50,"linear", function () {
      gamerun();//递归
    });
}




欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739

评价