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