滑鼠鍵盤事件_ZenDei技術網路在線

滑鼠鍵盤事件

-Advertisement-

1、獲取滑鼠位置 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:// ...

1、獲取滑鼠位置

<!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-Type" content="text/html; charset=utf-8" />
<title>獲得滑鼠的坐標值----當需求為獲得的坐標值相對於body時</title>

</head>

<body>

<div style=" width:500px; margin:100px auto;">
<p id="x"></p>
<p id="y"></p>
</div>


<script type="text/javascript">

var x , y;

//當需求為獲得的坐標值相對於body時，用：
function positionBody(event){
event = event||window.event;
//獲得相對於body定位的橫標值；
x=event.clientX
//獲得相對於body定位的縱標值；
y=event.clientY
}

 

//應用：
document.onmousemove = function(event){
positionBody(event);
document.getElementById("x").innerHTML = "x= " + x + "px";
document.getElementById("y").innerHTML = "y= " + y + "px";
}

</script>


</body>
</html>

2、獲得滑鼠的坐標值----當需求為獲得的坐標值相對於body時

<!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-Type" content="text/html; charset=utf-8" />
<title>獲得滑鼠的坐標值----當需求為獲得的坐標值相對於body時</title>

</head>

<body>

<div style=" width:500px; margin:100px auto;">
<p id="x"></p>
<p id="y"></p>
</div>

<script type="text/javascript" language=JavaScript charset="UTF-8">
document.onkeydown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];  //獲取事件（最後一個是火狐）
if(e && e.keyCode == 27) { // 按 Esc 
//要做的事情
alert("按下esc")
}
if(e && e.keyCode == 113) { // 按 F2 
//要做的事情
alert("按下f2")
}
if(e && e.keyCode == 13) { // enter 鍵
//要做的事情
alert("按下enter")
}
};
</script>

</body>

</html>

3、控制人物走動

<html>
    <head>
        <meta charset="utf-8" />
        <title>人物走動</title>
    </head>
    <body onkeydown="show()">
        <ul style="posttion:absolute;border:1px solid #999;list-style:none;width:150px;padding:20px;background:#ffffef;">
            <li>w：向上</li>
            <li>s：向下</li>
            <li>a：向左</li>
            <li>d：向右</li>
            <li>空格：停止</li>
        </ul>
        <div style="position:absolute;top:0;left:0" id='di'><img src="http://files.jb51.net/file_images/article/201408/201482791327688.gif?201472791345" id="img"></div>
        <script>
            var img1='http://files.jb51.net/file_images/article/201408/201482791656841.gif?201472791722';
            var img2='http://files.jb51.net/file_images/article/201408/201482791327688.gif?201472791345';
            var x=0;
            var y=0;
            var xs=0;
            var ys=0;
            var flag=true;
            var zq=null;
            function ks(){
                zq=setInterval(function(){ 
                    var s=document.getElementById('img');  
                    var str=s.src;
                    var area=document.getElementById('di');
                    var xpos=parseInt(area.style.left);
                    var ypos=parseInt(area.style.top);
                    x=x+xs;
                    y=y+ys;
                    area.style.left=x;
                    area.style.top=y;
                    var pos=str.lastIndexOf('/')+1;
                    var hz=str.substr(pos);
                    if(hz==img1){
                        s.src= img2;
                    }else{
                        s.src= img1;
                    }              
                },50);
            }
            ks();
 
            function show(){
                var sz=window.event.keyCode;
                switch(sz){
                    case 87:
                        img1='http://files.jb51.net/file_images/article/201408/ren_h_1.gif';
                        img2='http://files.jb51.net/file_images/article/201408/ren_h_2.gif';
                        ys=-5;
                        xs=0;
                        break;
                    case 65:
                        img1='http://files.jb51.net/file_images/article/201408/ren_l_1.gif';
                        img2='http://files.jb51.net/file_images/article/201408/ren_l_2.gif';
                        xs=-5;
                        ys=0;
                        break;
                    case 68:
                        img1='http://files.jb51.net/file_images/article/201408/ren_r_1.gif';
                        img2='http://files.jb51.net/file_images/article/201408/ren_r_2.gif';
                        xs=5;
                        ys=0;
                        break;
                    case 83:
                        img1='http://files.jb51.net/file_images/article/201408/ren_q_1.gif';
                        img2='http://files.jb51.net/file_images/article/201408/ren_q_2.gif';
                        ys=5;
                        xs=0;
                        break;
                    case 32:
                      if(flag){
                          clearInterval(zq);
                          flag=false;
                          break;
                       }
                    case 13:
                     if(!flag){
                         ks();
                         flag=true;
                        break;
                      }
                }
            }
        </script>
    </body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

阿裡前端兩年隨想

其實按照我的情懷和尿性，文章的標題應該是前端登堂入室寶典、前端成長就這三招之類，奈何這是篇軟文 ~ 看官先別急Command + W，尤其是和我經歷類似我可以負責任的說，這是一篇有態度的軟文欲語淚先流我希望做些有用的事情，甚至可以做個有用的人才畢業工作的第一年我是滿足的，學到了很多新知識 ...
兩個小的js效果，頁面翻轉和智能提示

可以看出,使用方式越來越簡單,程式員越來越傻,不知道是好事,還是壞事。。。 ...
jquery-easyui：如何設置組件屬性

在這裡以面板為例： $().ready(function() { $('#menu').tree({ url : '/menu', onClick : function(node) { $('#center').panel({ href:node.attribute.url }... ...
基於cordova開發的基本事項和常用總結

1. 基本規範符合web標準, 語義化html, 結構、表現、行為分離, 相容性優良. 頁面性能方面, 代碼要求簡潔明瞭有序, 儘可能的減小伺服器負載, 保證最快的解析速度. 2. 文件規範 html, css, js, image文件均放在約定的目錄中，基本目錄結構如2.1圖，並且目錄與文件名中 ...
浮動影響

一、浮動元素自動變塊級元素非浮動元素占據浮動元素位置，浮動元素不能占據非浮動元素位置？？？向上占據浮動元素會被自動設置成塊級元素，相當於給元素設置了display:block（塊級元素能設置寬和高，而行內元素則不可以）。二、併列關係的盒子，不一致地浮動，位置問題元素浮動會對後面非浮動的兄弟元 ...
ES6對象擴展

[1]對象類別 [2]對象簡寫 [3]可計算屬性名 [4]判斷相等 [5]對象合併 [6]屬性名重覆 [7]枚舉順序 [8]對象原型 [9]方法定義 [10]對象遍歷 ...
實現移動端頂部與底部固定，內容區優化的效果

實現頂部與底部固定的效果十分容易，且很多人都會選擇用這個方式，就是頂部position:fixed，底部也position:fixed。實現的效果就像下麵兩張圖，container區域是佈滿整個屏幕的，且滾動條也是滾動在整個屏幕中，調內容區時只能調節高度。其實還有一種方式可以實現較好的效果，就是內 ...
Angular02 通過angular-cli來搭建web前端項目

準備前提：已經搭建好angular-cli環境，還未搭建好的請參見三少的博客（開發基礎分類） 1 新建一個文件夾該文件夾用來存放所有利用angular-cli搭建的web前端項目 2 啟動命令視窗，併進入該文件夾 3 創建新項目 ng new 項目名稱註意：項目名稱最好全部用字母 3.1 到文件 ...