Question

HTML：

<div id="wrapper" style="width: 100%;">
    <div class="centerdiv">
        <div class="container">
            <div id="follower"></div>
        </div>
    </div>
</div>
<br/>
<div class="log">Move the mouse to see the coordonates!</div>

CSS：

  body, html {
      margin: 0px;
      padding: 0px;
      background-color: #151515;
  }
  #follower {
      position : absolute;
      background-color: #F03D09;
      width:15px;
      height:15px;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
      border-bottom-left-radius: 50px;
  }
  .centerdiv {
      margin-left:auto;
      margin-right:auto;
      position:relative;
  }
  .container {
      position:absolute;
      top:0;
      left:0;
      overflow:hidden;
      border:1px solid #303030;
      background-color: #181818;
  }
  .log {
      margin: 0px auto;
      width: 300px;
      padding: 5px;
      text-align: center;
      color: #FFFFFF;
      background-color: #181818;
      border: 1px solid #303030;
  }

JS：

    var documentWidth = $(window).width();
var documentHeight = $(window).height();
var minWindowDim = Math.min(documentWidth, documentHeight);
var newDim = 0.8 * minWindowDim;
$('.container').css({
    "width": newDim,
        "height": newDim,
        "border-radius": newDim / 2
});
$('.centerdiv').css({
    "width": newDim
});
$('#wrapper').css({
    "height": $('.container').height()
});

$(window).resize(function () {
    var documentWidth = $(window).width();
    var documentHeight = $(window).height();
    var minWindowDim = Math.min(documentWidth, documentHeight);
    var newDim = 0.8 * minWindowDim;
    $('.container').css({
        "width": newDim,
            "height": newDim,
            "border-radius": newDim / 2
    });
    $('.centerdiv').css({
        "width": newDim
    });
    $('#wrapper').css({
        "height": $('.container').height()
    });
});

var mouseX = 0,
    mouseY = 0,
    limitX = $('.container').width() - 15,
    limitY = $('.container').height() - 15;
$(window).mousemove(function (e) {
    var offset = $('.container').offset();
    var halfContWidth = $('.container').width() / 2;
    var halfContHeight = $('.container').height() / 2;

    mouseX = Math.min(e.pageX - offset.left, limitX);
    mouseY = Math.min(e.pageY - offset.top, limitY);        

    if (Math.sqrt(Math.pow(Math.abs(e.pageX - offset.left - halfContWidth), 2) + Math.pow(Math.abs(e.pageY - offset.top - halfContHeight), 2)) > newDim / 2) {

        var ratio = (mouseX - halfContWidth)/(mouseY - halfContHeight);
        var sign = 1;

        if(mouseX - halfContWidth < 0)
            sign = -1;

        mouseX = Math.sqrt(Math.pow(ratio,2)*Math.pow(newDim,2)/4/(1+Math.pow(ratio,2))) * sign;            
        mouseY = (mouseX/ratio);

        mouseX += halfContWidth;
        mouseY += halfContHeight;

    }

    if (mouseX < 0) mouseX = 0;
    if (mouseY < 0) mouseY = 0;

    $('.log').html("DivX: " + Math.round(mouseX - halfContWidth) + " DivY: " + Math.round(mouseY - halfContHeight));
});

$(window).resize(function () {
    limitX = $('.container').width() - 15;
    limitY = $('.container').height() - 15;
});


// cache the selector
var follower = $("#follower");
var xp = 0,
    yp = 0;
var loop = setInterval(function () {
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp - 5) / 12;
    yp += (mouseY - yp - 5) / 12;
    follower.css({
        left: xp,
        top: yp
    });

}, 5);

正如你可以在小提琴中看到的那样，＆＃34;鼠标追随者＆＃34;跟随鼠标受.container的限制。但是我希望鼠标跟随器也限制在容器的圆形路径上。我的意思是，即使光标位于容器内，我也希望鼠标跟随器粘在容器的边框上（就像鼠标跟随器和容器的中心所做的半径一样）。

另一件事。如果可能的话我也希望能够做出回应。

Make元素遵循mousemove上的圆形容器轮廓

0 个答案: