用鼠标移动填充容器的颜色

on mouse move fill container with color

本文关键字：颜色 填充 鼠标 移动      更新时间：2023-09-26

假设我有一个div，宽度为100px，高度为40px，背景色为橙色。我想运行我的鼠标通过div从左到右，随着鼠标移动，它应该填充颜色为绿色的div。一旦鼠标越过div的末尾，颜色应该保持绿色。如果鼠标光标在通过结束前离开div，则颜色应该动画/填充回橙色。此外，鼠标必须从div的开始(0px)开始，否则鼠标移动效果将不执行任何操作。

我花了几天时间在这件事上，它快把我逼疯了。

这是我到目前为止的一些内容

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

这个工作?

$(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>

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

solution on js fiddle

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

这是最简单的工作演示。我相信你可以改进的。

solution https://jsfiddle.net/h8w1qxze/
相关文章：