本文例項為大家分享了js實現頁面滑鼠點擊出現圖片，供大家參考，具體內容如下

需求：

在頁面可視區滑鼠點選時，滑鼠位置出現圖片

技術：

監聽器，滑鼠座標獲取

效果圖

原始碼分享：

圖片是動態新增進頁面的，所以沒有HTML部分。

JS

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);
 let divImg = document.querySelector("#mouseImg");
 document.addEventListener("mousedown",function (e) {
  let x = e.pageX;
  let y = e.pageY;
 divImg.style.left = x + "px" ;
 divImg.style.top = y + "px";
 let imgs = divImg.children;
 for (let i =0 ; i < imgs.length ;i++) {
  imgs[i].style.opacity = "1";
  setTimeout(function () {
  imgs[i].style.opacity = "0";
  },2200);
 }
 });

CSS

body {
  background-color: rgba(0,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;
 }

這個案例，也可以做成 圖片跟隨滑鼠移動 上圖 ！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。