javaScript實現鍵盤控制元素移動位置及縮放

月亮販售快樂發表於2020-11-14
JavaScript

原生js實現鍵盤控制元素移動位置及縮放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div=document.querySelector('div');
        var scale=1;
		// 修改樣式
        function css(el, attr, val) {
            if (val == undefined) {
                return parseFloat(getComputedStyle(el)[attr]);
            }
            // 設定哪些樣式
            // el.style[attr]=val+'px';
            switch (attr) {
                case 'opacity':
                case 'zIndex':
                    el.style[attr] = val;
                    break;
                default:
                    el.style[attr] = val + 'px';
            }
        }
        
        // 鍵盤按下
        document.addEventListener('keydown',function(e){
            // 獲取按鍵 
            //左 上  右 下  
            //37 38 39  40       
            // 獲取鍵碼
            // console.log(e.keyCode)
            if(e.keyCode == 39){
                var l=css(div,'left');
                css(div,'left',l+5)
            }
            if(e.keyCode == 37){
                var l=css(div,'left');
                css(div,'left',l-5)
            }
            if(e.keyCode == 38){
                var t=css(div,'top');
                css(div,'top',t-5)
            }
            if(e.keyCode == 40){
                var t=css(div,'top');
                css(div,'top',t+5)
            }
            // 組合鍵 控制元素縮放
            // transform:scale(1.5)
            if(e.keyCode == 38 && e.ctrlKey){
                scale+=0.5;
                div.style.transform='scale('+scale+')';
            }
            if(e.keyCode == 40 && e.ctrlKey){
                scale-=0.5;
                div.style.transform='scale('+scale+')';
            }
        })
    </script>
</body>
</html>

看完點個贊再走唄

相關文章