圖像跟隨鼠標指針並消失

Question

我正在嘗試創建一個跟隨光標並“打印” /繪制自身的圖像，並在x秒鍾后淡出已“打印” /繪制的每個圖像。

到目前為止，我已經設法使圖像跟隨光標，只是不確定如何創建某個函數或方法，該函數或方法將使每個圖像在一定時間后消失。

我創建了一個JS小提琴來幫助說明。

JS

(function() {
"use strict";

document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
  var imgFollow, eventDoc, doc, body, pageX, pageY;

  event = event || window.event; // IE-ism

  // If pageX/Y aren't available and clientX/Y
  // are, calculate pageX/Y - logic taken from jQuery
  // Calculate pageX/Y if missing and clientX/Y available
  if (event.pageX == null && event.clientX != null) {
    eventDoc = (event.target && event.target.ownerDocument) || document;
    doc = eventDoc.documentElement;
    body = eventDoc.body;

    event.pageX = event.clientX +
      (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
      (doc && doc.clientLeft || body && body.clientLeft || 0);
    event.pageY = event.clientY +
      (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
      (doc && doc.clientTop  || body && body.clientTop  || 0 );
  } 

  // Add an image to follow the cursor     
  imgFollow = document.createElement('div');
  imgFollow.className = "imgFollow";
  imgFollow.style.left = event.pageX + "px";
  imgFollow.style.top = event.pageY + "px";
  document.body.appendChild(imgFollow);

  }
})();

的CSS

.wrapper {
  height: 100vh;
  width:100%;
  background-color:green;
  overflow:hidden;
  position:relative;
}
.imgFollow {
  width: 32px;
  height: 32px;
  position: absolute;
  opacity:0.3;
  background-repeat:none;
  background-image:url('http://static.wfu.edu/images/icon-help-32x32.png');
  transform: translate(-50%, -50%);
}

Answer 1

添加它們。

JS

setTimeout(function () {
    imgFollow.className = "imgFollow fade-out"
},1000);

的CSS

.fade-out{
    transition: opacity 1s;
    opacity: 0 !important;
}

Answer 2

這是一種使用jquery實現所需功能的方法。

 $(document).ready(function() {
        var init = true;
        $(document).on('click', function() {
            $(this)[init?'on':'off']('mousemove', follow);
            init = !init;
        }).trigger('click');

        function follow(e) {
            var xPos = e.pageX;
            var yPos = e.pageY;
           $("#imgFollow").addClass("imgFollow"); //adds the css class to a div with id "imgFollow" 

            $("#imgFollow").offset({
                left: e.pageX,
                top: e.pageY
            });
        }
    });    

因此，在文檔中包含jquery librar並添加具有您的命名ID的div。

希望這可以幫助。