Question

假设我的宽度为100px，高度为40px，背景为橙色。我想让鼠标从左到右穿过div，当鼠标移动时，它应该用绿色填充div。一旦鼠标越过div的末尾，颜色应保持绿色。如果鼠标光标在通过结束之前从div中出来，则颜色应该动画/填充回橙色。此外，鼠标应该从div的开始（0px）开始，以便鼠标移动效果开始，否则它应该什么也不做。

我已经花了几天时间，这让我发疯了。

这是迄今为止我所掌握的一个小提琴

enter code here https://jsfiddle.net/7my7etzm/

Answer 1

这项工作？

$(document).ready(function() {
  var $orangeBox = $(".orangeBox"),
      $greenBox = $(".greenBox"),
      $goalPosts = $(".goalPosts"),
      winning = function() {
        $orangeBox.unbind('mousemove').unbind('mouseleave');
        $goalPosts.remove();
      };
  
  $orangeBox.bind('mousemove', function(e) {
    var xPosition = e.pageX - this.offsetLeft;
    $goalPosts.show();
    $greenBox.css('width', xPosition);
    if (xPosition > $orangeBox.outerWidth()) {
      winning();
    }
  })
  .bind('mouseleave', function(){
    if($greenBox.outerWidth() < ($orangeBox.outerWidth() - 1)) {
      $greenBox.animate({
        width: "0"
      }, 500);
      $goalPosts.hide();
    }  
  });
});

.orangeBox{
  position:relative;
  display:block;
  height:40px;
  width:100px;
  background:orange;
}
.greenBox {
  position:absolute;
  height:100%;
  top:0;
  left:0;
  background:green;
}
.goalPosts {
  position:absolute;
  display:none;
  height:100%;
  top:0;
  left:100%;
  width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="orangeBox">
  <div class="greenBox"></div>
  <div class="goalPosts"></div>
</div>

Answer 2

这是一个非常快速和基本的解决方案，我希望它有所帮助

solution on js fiddle

ps：应该调整帧速率，因为快速移动鼠标时它会失败

Answer 3

Here是您最简单的工作演示。我相信你可以改善这一点。

solution https://jsfiddle.net/h8w1qxze/

在鼠标移动填充容器与颜色

3 个答案: