Question

请运行代码段并将鼠标拖到栏上以使其变红。如果您非常缓慢地拖动鼠标，则会将其填充为红色，但如果快速移动它，则会出现白洞。

如何解决？（白洞）

我想制作一个分为500个部分的条形图，如果你将它悬停，它会变成红色并且能够快速拖动并填充它而没有孔。

任何帮助表示赞赏：）

$(function() {

  var line = $("#line");
  
  for ( var i = 0; i < 500; i++) {
  
    line.append('<div class="tile" id="t'+(i+1)+'"></div>');
    
  }
  
  var tile = $(".tile");
  
  tile.hover (
    function() { //hover-in
      $(this).css("background-color","red");
    },
    function() { //hover-out
      
    }
   );
    
});

#line{
  height: 50px;
  background-color: #000;
  width: 500px;
}
.tile {
  height: 50px;
  float: left;
  background-color: #ddd;
  width: 1px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div id="line"></div>

Answer 1

根据你的设计，一种方法是迭代第一个到你当前的悬停元素并填充它，这将导致没有空格。也就是说，您可能需要考虑使用HTML5 Canvas并将0中的矩形绘制到鼠标位置，这样可以显着提高速度。

$(function() {

  var line = $("#line");
  
  for ( var i = 0; i < 500; i++) {
  
    line.append('<div class="tile" id="t'+(i+1)+'"></div>');
    
  }
  
  var tile = $(".tile");
  
  tile.hover (
    function() { //hover-in
      var self = this;
      $("#line").children().each(function(){
        $(this).css("background-color","red");
        if(this == self) return false;
      });
    },
    function() { //hover-out
      
    }
   );
    
});

#line{
  height: 50px;
  background-color: #000;
  width: 500px;
}
.tile {
  height: 50px;
  float: left;
  background-color: #ddd;
  width: 1px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div id="line"></div>

修改

下面是一个使用HTML 5 Canvas执行相同任务的示例：

$("#line").mousemove(function(e){ var canvas = $(this)[0]; var ctx = canvas.getContext("2d"); var rect = canvas.getBoundingClientRect() var x = e.clientX - rect.left; ctx.fillStyle="red"; ctx.fillRect(0, 0, x, canvas.height); });

#line{ background-color: #ddd; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="line" width=500 height=50 ></canvas>

Answer 2

这是nextUntil选择兄弟姐妹的另一种方法..

$(function() {

  var line = $("#line");
  
  for ( var i = 0; i < 500; i++) {
  
    line.append('<div class="tile" id="t'+(i+1)+'"></div>');
    
  }
  
  var tile = $(".tile");
  
  line.on( 'mouseover', function(ev){
    $('.tile').first().nextUntil( $('.tile').eq(ev.pageX) ).css("background-color","red");
  });

  line.on( 'mouseleave', function(ev){
    $('.tile').css("background-color","#ddd");
  });

});

#line{
  height: 50px;
  background-color: #000;
  width: 500px;
}
.tile {
  height: 50px;
  float: left;
  background-color: #ddd;
  width: 1px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div id="line"></div>

Answer 3

另一个解决方案是使用jQuery的mousemove方法。这样就可以让杆向前和向后移动，只需按照光标位置即可。

这会检测div内部的移动，然后我以百分比的形式计算div中光标的位置，并将其应用为红条的宽度。

    $( ".bar" ).mousemove(function( event ) {
      var xCord = event.pageX;
      xPercent = (xCord + $('.pct').width()) / $( document ).width() * 100;
  
      $('.pct').width(xPercent+'%');
  
    });

    
    .bar{
        background:'#999999';
        width:50%;
        height:50px;
 
    }

    .pct{
        height:100%;
        background:red;
        width:0%;
    }

    

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
    </script>
    
    <div class="bar" style="background:#999999">
        <div class="pct"></div>
    </div>

jQuery悬停太慢了

3 个答案: