JS实现页面鼠标点击出现图片特效

这篇文章主要为大家详细介绍了JS实现页面鼠标点击出现图片特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现页面鼠标点击出现图片，供大家参考，具体内容如下

需求：

在页面可视区鼠标点击时，鼠标位置出现图片

技术：

监听器，鼠标坐标获取

效果图

源码分享：

图片是动态添加进页面的，所以没有HTML部分。

 let div = document.createElement("div"); div.id = "mouseImg"; for (let i =0 ; i <3 ;i++){ let img=document.createElement("img"); img.src="images/timg.gif" ; div.appendchild(img); } document.body.appendchild(div); divimg=document.querySelector("#mouseImg"); document.addeventlistener("mousedown",function (e) { x=e.pageX; y=e.pageY; divimg.style.left=x + "px" divimg.style.top=y "px"; imgs=divImg.children; for (let i < imgs.length ;i++) imgs[i].style.opacity="1" settimeout(function () "0"; },2200); });< pre>

CSS

 body { background-color: rgba(0, 255, 255, 0.12); cursor: pointer; } #mouseImg { width: 50px; height: 50px; position: absolute; } #mouseImg img { width: 100%; opacity: 0; transition: all .9s ease ; } #mouseImg img:nth-of-type(2){ transition-delay: .5s; } #mouseImg img:nth-of-type(3){ transition-delay: .8s; }

这个案例，也可以做成图片跟随鼠标移动上图！