자바 스크립트가 버튼 변화 아래 사진을 수정 학습

면책 조항 :이 문서는 블로거 원본입니다, 추적 에 의해-SA의 CC 4.0 저작권 계약, 복제, 원본 소스 링크이 문을 첨부 해주세요.

이 링크 : https://blog.csdn.net/weixin_45747700/article/details/102574818

1. 자바 스크립트의 버튼의 사용은 수직 및 수평 이미지 변동 수정
... 이미지 준비 여기에 그림 삽입 설명
2. 수정 버튼 효과 이동도
(3) 다음에, 코드는
자바 스크립트

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>修改按键实现动态效果</title>
</head>
<body>
<center>
    <h2 align="center">按 键 修 改</h2>
    上：<input type="text" id="up" onkeyup="caplock('up')" maxlength="1"><br><br>
    下：<input type="text" id="down " onkeyup="caplock('down')" maxlength="1"><br><br>
    左：<input type="text" id="left" onkeyup="caplock('left')" maxlength="1"><br><br>
    右：<input type="text" id="right " onkeyup="caplock('right')" maxlength="1"><br><br>
    <button onclick="ctrl()">修 改</button>
</center>
<lable id="show"/>
<img id="img" src="3.jpg" style="width: 80px;
height: 80px;
position: absolute;
left:0px;top: 0px"/>

   <script type="text/javascript">
    var obj = document.getElementById("img");
    obj.left = 0;
    obj.top = 0;
    var up,down,left,right;
    var up1,downl,left1,right1;
    function ctrl(){
        up = up1;
        down = downl;
        left = left1;
        right= right1;
        alert(up+";"+down+";"+left+";"+right);
        shift();
    }
    function caplock(str){
        if(str=="up") {
            up1 = event.keyCode ;
        }
        if(str=="down") {
            downl= event.keyCode;
        }
        if(str=="left") {
            left1= event.keyCode;
        }
        if(str=="right") {
            right1 =event.keyCode;
        }

    }
    function action() {

        console.log(event.keyCode);
        if (event.keyCode == parseInt(left)) {
            //左
            obj.left -= 80;
        }
        if (event.keyCode == parseInt(up)) {
            //上
            obj.top -= 80;
        }
        if (event.keyCode == parseInt(right)) {
            //右
            obj.left += 80;
        }
        if (event.keyCode == parseInt(down)) {
            //下
            obj.top += 80;
        }
        obj.style.left = obj.left + "px", obj.style.top = obj.top + "px";
    }
      document.onkeydown = action;
</script>
</body>
</html>

자바 스크립트가 버튼 변화 아래 사진을 수정 학습

추천