前端入门（自留）——鼠标事件

用户342658665928
109 阅读1分钟

相关知识

鼠标事件

事件现象
onclick鼠标单击对象
ondbclick鼠标双击对象
onmouseover鼠标移动到对象上方
onmouseover鼠标移出对象
onmousedown鼠标按下
onmouseup鼠标松开

使用：<··· onclick="函数或操作"> 或 Element.onclick

页面效果

初始的页面是五张背面的卡牌。

  • 鼠标单击第一张卡牌，显示“黑桃J”。
  • 鼠标双击第二张卡牌，显示“黑桃Q”。
  • 鼠标移动到第三张卡牌上，显示“黑桃K”；鼠标移出卡牌，恢复背面。
  • 鼠标单击第四张卡牌不松开，显示“黑桃A”；鼠标松开，恢复背面。
  • 鼠标移动到第四张卡牌的不同位置，会显示四种不同的牌：
    • 左上角——黑桃J
    • 左下角——黑桃Q
    • 右上角——黑桃K
    • 右下角——黑桃A

mouseEvent.gif

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标事件处理</title>
    <!-- 导入外部css文件 -->
    <link type="text/css" rel="stylesheet" href="../css/mouseEventDemo.css" />
</head>

<body>
    <div id="mainDiv">
        <dl>
            <dt><img src="../images/mouseEventDemo/0.png" onclick="this.src='../images/mouseEventDemo/1.png'" /></dt>
            <dd>单击</dd>
        </dl>
        <dl>
            <dt><img src="../images/mouseEventDemo/0.png" ondblclick="this.src='../images/mouseEventDemo/2.png'" /></dt>
            <dd>双击</dd>
        </dl>
        <dl>
            <dt><img src="../images/mouseEventDemo/0.png" onmouseover="this.src='../images/mouseEventDemo/3.png'" onmouseout="this.src='../images/mouseEventDemo/0.png'" /></dt>
            <dd>移动悬停</dd>
        </dl>
        <dl>
            <dt><img src="../images/mouseEventDemo/0.png" onmousedown="this.src='../images/mouseEventDemo/4.png'" onmouseup="this.src='../images/mouseEventDemo/0.png'" /></dt>
            <dd>按下松开</dd>
        </dl>
        <dl>
            <dt><img id="myImage" src="../images/mouseEventDemo/0.png" onmousemove="changeImage(event)"
                onmouseout="this.src='../images/mouseEventDemo/0.png'" /></dt>
            <dd>鼠标移动</dd>
        </dl>
    </div>

    <!-- 导入外部js文件 -->
    <script type="text/javascript" src="../js/mouseEventDemo.js"></script>
</body>
</html>

#mainDiv{
    width: 600px;
    height: 200px;
}
dl{
    float: left;
}
img{
    width: 120px;
}

// 第五张卡牌变化
function changeImage(e) {
    // IE8以下，Event对象必须作为window对象的一个属性
    e = e || window.event;
    // 图片容器
    var myImage = document.getElementById("myImage");
    
    // 获得鼠标到图片左侧的距离（鼠标x坐标-图片左侧离父元素的距离）
    var x = e.clientX - myImage.offsetLeft;
    // 获得鼠标到图片上侧的距离（鼠标y坐标-图片上部离父元素的距离）
    var y = e.clientY - myImage.offsetTop;
    var url = "../images/mouseEventDemo/";
    // 鼠标位于左上角
    if (x < myImage.width / 2 && y < myImage.height / 2)
        myImage.src = url + "1.png";
    // 位于左下角
    else if (x < myImage.width / 2 && y > myImage.height / 2)
        myImage.src = url + "2.png";
    // 位于右上角
    else if (x > myImage.width / 2 && y < myImage.height / 2)
        myImage.src = url + "3.png";
    // 位于右下角
    else if (x > myImage.width / 2 && y > myImage.height / 2)
        myImage.src = url + "4.png";
}
avatar
文章
阅读
粉丝