码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标键盘事件

时间:2017-07-27 00:54:43      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:post   一个   x86   content   caller   lang   inner   nal   src   

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 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>

鼠标键盘事件

标签:post   一个   x86   content   caller   lang   inner   nal   src   

原文地址:http://www.cnblogs.com/infernoyy/p/7242488.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!