JS实现页面鼠标点击出现图片特效
本文实例为大家分享了js实现页面鼠标点击出现图片，供大家参考，具体内容如下
需求：
在页面可视区鼠标点击时，鼠标位置出现图片
技术：
监听器，鼠标坐标获取
效果图
源码分享：
图片是动态添加进页面的，所以没有HTML部分。
JS
letdiv=document.createElement("div");
div.id="mouseImg";
for(leti=0;i<3;i++){
letimg=document.createElement("img");
img.src="images/timg.gif";
div.appendChild(img);
}
document.body.appendChild(div);
letdivImg=document.querySelector("#mouseImg");
document.addEventListener("mousedown",function(e){
letx=e.pageX;
lety=e.pageY;
divImg.style.left=x+"px";
divImg.style.top=y+"px";
letimgs=divImg.children;
for(leti=0;i
CSS
body{
background-color:rgba(0,255,255,0.12);
cursor:pointer;
}
#mouseImg{
width:50px;
height:50px;
position:absolute;
}
#mouseImgimg{
width:100%;
opacity:0;
transition:all.9sease;
}
#mouseImgimg:nth-of-type(2){
transition-delay:.5s;
}
#mouseImgimg:nth-of-type(3){
transition-delay:.8s;
}
这个案例，也可以做成图片跟随鼠标移动上图！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。