如何使用純JS在mousemove上使div跟隨另一個div內的光標

Question

我是純Java的初學者。 我想創建一種效果，例如用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>