javascript——光标键控制div移动,

CSS代码:

#div1{ width: 100px; height: 100px; background: #ccc; position: absolute;}

HTML代码:

<div id="div1"></div>

JS代码:

window.onload = function(){

        var oDiv = document.getElementById(‘div1‘);

        document.onkeydown = function(ev){

            var ev = ev || event;

            switch(ev.keyCode){
                //向左移动
                case 37:
                oDiv.style.left = oDiv.offsetLeft - 10 + ‘px‘;
                break;

                //向上移动
                case 38:
                oDiv.style.top = oDiv.offsetTop - 10 + ‘px‘;
                break;

                //向右移动
                case 39:
                oDiv.style.left = oDiv.offsetLeft + 10 + ‘px‘;
                break;

                //向下运动
                case 40:
                oDiv.style.top = oDiv.offsetTop + 10 + ‘px‘;
                break;

            }
        };

    };

注意:只有offsetLeft和offsetTop,没有offsetRight和offsetBottom。

说明:event.keyCode值为37﹐38﹐39﹐40对应按下的方向键分別是 左﹐上﹐右﹐下。

时间: 2024-10-07 10:09:30

javascript——光标键控制div移动,的相关文章

利用JavaScript通过单选框radio控制div的显示和隐藏

通过鼠标单击单选框的动作,实现某个div或多个div的显示和隐藏.实例如下: JavaScript代码如下: 1 function divClick(){ 2 3 var show = ""; 4 show = $("input[name='AdPrintMode']:checked").val(); 5 switch (show){ 6 case '1': 7 document.getElementById("img1").style.disp

JavaScript强化教程——DOM编程(两种控制div移动的方法)

本文为H5EDU机构官方HTML5培训教程,主要介绍:JavaScript强化教程--DOM编程(两种控制div移动的方法) 第一种 按钮控制首先 创建两个html按钮和一个div并给div一个样式 input type="button" value="左" id="1"> <input type="button" value="右" id="2"> <div i

JavaScript学习之DIV层与图像

DIV层与图像 一.设计一个可定位的层 1.设置位置(position)和大小 (1)绝对定位(absolute):以页面边框为参照,只要设置好绝对位置,那么元素的位置会始终固定在距离边框某个位置的距离. 绝对定位有两个属性:left和top,分别是距离网页左边和网页顶部的绝对位置,可借助style属性直接设置: style="position:absolute;left:距离左边距离;top:距离顶部距离" (2)相对定位(relative):需要有一个参照元素,设置好相对位置和参照

用键盘控制DIV &amp;&amp; Div闪烁

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS实现用键盘控制DIV上下左右+放大缩小与变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

html--鼠标控制DIV移动

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠标控制DIV移动</title> <script type="text/javascript"> var _IsMousedown = 0; var _ClickLeft = 0; var _C

控制div层的显示以及隐藏

控制div层的显示以及隐藏,例如,点击登录,弹出登录的层. 1.添加script代码 <script> function add_address(){ $('#popup2').show(); $('#gray').show(); } function closeAddressDiv(){ $('#popup2').hide(); } </script> 2.在body标签里面添加如下的div <div class="popup2" id="po

js键盘控制div移动,解决停顿问题

问题版本代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <html> <head> <title>键盘控制div移动</title> <meta charset="utf-8" /> <style type="text/css"> #div1{width:100px;height:1

JS实现用键盘控制div的移动操作与背景变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-