如何讓光標跟隨另一個div裏的光標，與純JS的mousemove

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>