JavaScript按上下左右键实现图片在网页上的移动

最新推荐文章于 2021-06-04 20:15:12 发布

Bravo！！！

最新推荐文章于 2021-06-04 20:15:12 发布

阅读量965

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47982238/article/details/107840804

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        img{
            cursor: pointer;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
    <img src="dlam.jpg" id="imgid" >
</body>
<script>
    imgobj=document.getElementById('imgid');
    xl=0;//起始位置为0
    xs=10;//增加量为10
    yl=0;
    ys=10;
    document.onkeydown=function(event){
        kc=event.keyCode;
        switch(kc){
            case 37://←
            xl-=xs;
            imgobj.style.left=xl+'px';
            break;
            case 38://↑
            yl-=ys;
            imgobj.style.top=yl+'px';
            break;
            case 39://→
            xl+=xs;
            imgobj.style.left=xl+'px';
            break;
            case 40://↓
            yl+=ys;
            imgobj.style.top=yl+'px';
            break;
        }
    }
</script>
</html>

Bravo！！！

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript按上下左右键实现图片在网页上的移动

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style> img{ cursor: pointer; position: absolute; } </style></h.
复制链接

扫一扫