JavaScript鼠标事件小功能

本文主要是介绍JavaScript鼠标事件小功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

开发工具：Vs Code
开发语言：JavaScript脚本语言
所用技术：JavaScript事件
功能名称：模拟植物大战僵尸种植植物
所用事件：
        mousedown：鼠标按下
        mouseup：鼠标抬起
        mousemove：鼠标进入事件
html代码：
        

<!-- 创建一个豌豆射手 -->
<img id="_img" src="./wdss.png">

css代码：
        

/* 创建一个动画 */
@keyframes identifier {
    0%{transform:skew(0deg,0deg);}
    30%{transform:skew(3deg,1deg);}
    60%{transform:skew(0deg,0deg);}
    100%{transform:skew(-3deg,-1deg);}
}
/* 为豌豆射手添加这个动画效果 */
#_img{
    animation: identifier 1.5s linear infinite;
}

JavaScript代码：

//为豌豆射手设置大小
_img.setAttribute("width","100px");
//鼠标按下事件监听
_img.onmousedown = function (){
    //为页面创建进入事件监听
    document.onmousemove = function(){
        //设置豌豆射手跟随鼠标移动：豌豆射手的绝对定位设置为鼠标在页面的位置，使用        
        //【event.clientX/clientY获取】
       _img.style.cssText += `position:abslute;top:${event.clientY};left:${event.clientX}`;
    }
}
//鼠标抬起事件监听
_img.onmouseup = function (){
    //清空鼠标进入页面事件
    document.onmousemove = "";
}

效果图：
        
        打印坐标验证：        

        ---------------------------------------------------------
ps：博主会使用鼠标事件完成理想的效果了
        博主有个大胆的想法：还原植物大战僵尸场景，希望大家多多指导
                

这篇关于JavaScript鼠标事件小功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！