如何使用纯JS在mousemove上使div跟随光标在另一个div内

Question

我是纯 Javascript 的初学者。我想创建一个效果，例如使用 jquery 创建的效果：

var mouseX = 0, mouseY = 0, limitX, limitY, containerWidth;

$(document).ready(function() {
    //Declaring the container size variable when we dom is ready
    //Grabbing the size of an element gives a number no longer a percentage
    containerWidth = $(".container").width();
    containerHeight = $(".container").height();

    $("#debug").html('Container Width = ' + containerWidth + '<br/>Container Height = ' + containerHeight);

    // cache the selector
    var follower = $("#follower");
    var xp = 0, yp = 0;
    // limitX is now the difference between the #container's width (=80%) and 15px
    limitX = containerWidth-15;
    limitY = containerHeight-15;
    var loop = setInterval(function(){
        // change 12 to alter damping higher is slower
        xp += (mouseX - xp) / 6;
        yp += (mouseY - yp) / 6;
        follower.css({left:xp, top:yp});
    }, 15);    

    //Since changing the window size affects the width, we need to redefine the container size variable so that's it's current
    $(window).resize(function() {
    //this makes limiX change based on container width 
       limitX = $(".container").width()-15;
        $("#debug").html('Container Width = ' + containerWidth + '<br/>Container Height = ' + containerHeight);
    }).resize();

    $(document).on('mousemove', function (e) {
       mouseX = Math.min(e.pageX, limitX);
       mouseY = Math.min(e.pageY, limitY);
    });

});

链接到用户的小提琴：http://jsfiddle.net/alexchopjian/5QfYL/5/， 但使用纯Javascript。可能吗？

我将非常感谢任何有关如何解决此问题的线索。

Answer 1

这不是确切的副本，但它是一个起点：

var mouseX = 0, mouseY = 0, limitX, limitY, containerWidth;

window.onload = function(e) {
  var containerObjStyle = window.getComputedStyle(document.querySelectorAll(".container")[0]);
  containerWidth =  parseFloat(containerObjStyle.width).toFixed(0);
  containerHeight = parseFloat(containerObjStyle.height).toFixed(0);
  document.getElementById('debug').innerHTML = 'Container Width = ' + containerWidth + '<br/>Container Height = ' + containerHeight;
  var follower = document.getElementById("follower");
  var xp = 0, yp = 0;
  limitX = containerWidth-15;
  limitY = containerHeight-15;
  var loop = setInterval(function(){
    xp = (mouseX == limitX) ? limitX : mouseX -7;
    xp = (xp < 0) ? 0 : xp;
    yp = (mouseY == limitY) ? limitY : mouseY -7;
    yp = (yp < 0) ? 0 : yp;
    follower.style.left = xp + 'px';
    follower.style.top = yp + 'px';
  }, 15);
  window.onresize = function(e) {
    limitX = parseFloat(window.getComputedStyle(document.querySelectorAll(".container")[0]).width).toFixed(0);
    document.getElementById("debug")[0].innerHTML='Container Width = ' + containerWidth + '<br/>Container Height = ' + containerHeight;
  }
  document.onmousemove = function(e) {
    mouseX = Math.min(e.pageX, limitX);
    mouseY = Math.min(e.pageY, limitY);
  }
};

#follower{
  position : relative;
  background-color : yellow;
  width:15px;
  height:15px;
  border-radius:50px;
}


.container {
  width:80%;
  height:150px;
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
  border:1px solid #000000;
}

<p id="debug"></p>
<div class="container">
    <div id="follower"></div>
</div>