鼠标和键盘事件

一.鼠标事件：

1.案列：鼠标悬停在图片上进行切换，移开图片又恢复。 我在两张图片覆盖在一起 写得css代码是这样的：

#img1{
        width: 300px;
        height: 300px;
        position: relative;
    }
    #img2{
        width: 300px;
        height: 300px;
        position: relative;
        top: 0px;
        left: -300px;
    }
复制代码

但是这样两张图片覆盖的时候会在左边留有一丝空隙。做不到完全覆盖。

js：

document.getElementById("img2").onmouseenter= function () {
    show()
};
document.getElementById("img1").onmouseleave= function () {
    hide()
};
function  show() {
    document.getElementById("img2").style.display="none";
}
function hide() {
    document.getElementById("img2").style.display="";
}
复制代码

因为第二张图片在第一张图片上，所以当鼠标移到第二张图片的时候，发生show()函数。将img2隐藏。这是img1显示出来，当鼠标离开img1，发生hide()函数。这时候img2显示出来 2.案例：图片跟随鼠标移动而移动

js：

  document.onmousemove = function () {
    var x = window.event.clientX;
    var y = window.event.clientY;
    var mid = document.getElementById("mid");
    if (!mid) {//判断图片是否加载完了，如果没加载
        return;
    }
    mid.style.left =x+"px";
    mid.style.top=y+"px";
};
复制代码

html+css：

 <div id="mid">
  <img style="width: 100px;height: 100px" src="">
 </div>



 
    #mid {
        position: absolute;
    }
复制代码

我认为关键是要在图片外面套一个div，不能直接对图片进行操作。要对图片外面的div进行操作。

键盘事件 1.案例：通过键盘的上下左右键对图片进行控制 html：

  <div id="div1">
  <div id="img">
   <img style="width: 50px;height: 50px" id="img1" src="../pic/倩女幽魂.jpg">
 </div>
 </div>
复制代码

js：

var a=document.getElementById("img");
window.document.onkeydown=function (ent) {
    var event=ent || window.event;
    switch (event.keyCode){
        case 37:/*左*/
            a.style.left=Math.max(0, a.offsetLeft - 1) + "px";
            break;
              /*offsetLeft表示向左偏移的坐标*/
        case 38:/*上*/
            a.style.top=Math.max(0, a.offsetTop - 1) + "px";
            break;
        case 39:/*右*/
            a.style.left=Math.max(0, a.offsetLeft + 1) + "px";
            break;
        case 40:/*下*/
            a.style.top=Math.max(0, a.offsetTop + 1) + "px";
            break;
    }
}
/*如果想要键盘控制图片 必须在图片外套一个div 键盘控制div*/
  event.keyCode 获取按下的键盘按键Unicode值
复制代码

转载于:https://juejin.im/post/5b18a1d9f265da6e64149fdd