如何使用纯JS在mousemove上创建一个div跟随另一个div内的游标

时间:2016-02-09 15:00:25

标签: javascript jquery

对于纯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。可能吗?

我将非常感谢有关如何实现这一目标的任何线索。

1 个答案:

答案 0 :(得分:0)

这不是确切的副本,但它是一个起点:

&#13;
&#13;
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);
  }
};
&#13;
#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;
}
&#13;
<p id="debug"></p>
<div class="container">
    <div id="follower"></div>
</div>
&#13;
&#13;
&#13;