编程语言
首页 > 编程语言> > 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:博主会使用鼠标事件完成理想的效果了
        博主有个大胆的想法:还原植物大战僵尸场景,希望大家多多指导
                

 

 

标签:鼠标,img,0deg,skew,JavaScript,transform,事件
来源: https://blog.csdn.net/hx_1551/article/details/122403937