在mouseMove

时间:2015-07-28 08:09:33

标签: javascript jquery mousemove easing

我创建了一个图像数组,在刷新页面时随机加载,并使用onmouseMove函数跟随光标。并在一段时间后淡出。您可以在此处找到一个有效的示例 - JSFiddle

我遇到了另一个 Question ,它提供了一个 JSFiddle ,允许图片跟随光标并为其添加一些缓动。整体流程和体验更具吸引力,这正是我想要实现的目标。

我想知道的是,是否可以对我创建的设计实施缓和?我已经读到有一些缓动插件,但我觉得我的情况可能有点不同,但我可能错了,在JS和jQuery方面我很缺乏经验。

任何关于如何实现这一目标的反馈将不胜感激。

JS

(function() {

  var pictures = ['http://www.iconsdb.com/icons/preview/white/x-mark-4-xxl.png', 'http://www.iconsdb.com/icons/preview/white/x-mark-xxl.png'];
  var selectedPicture = Math.floor(Math.random() * pictures.length);
  var randImg = pictures[selectedPicture];


  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
    var pictures = new Array ('http://www.etamcru.com/pub/img/toolbar_x_icon.png', 'http://www.schultzlawoffice.com/img/icons/blue/arrow-up-50-white.png', 'http://www.fullscope.com/SiteCollectionImages/Icons/White/Right-Arrow-Icon.png');
    var selectedPicture = Math.floor(Math.random() * pictures.length);


    imgFollow = document.createElement('div');
    imgFollow.className = "imgFollow";
    imgFollow.style.left = event.pageX + "px";
    imgFollow.style.top = event.pageY + "px";
    imgFollow.style.backgroundImage = 'url('+ randImg +')';
      console.log(randImg);
    document.body.appendChild(imgFollow);

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

  }
})();

0 个答案:

没有答案