Question

我正在尝试完全按照此链接中的说明进行操作。（带有阅读更多链接的横幅上的条纹） https://toyota.jp/vitz

到目前为止，我尝试执行的操作未按预期进行。它将整个条带移出范围。

$(document).on("click mousemove", ".spec-slider-wrap", function(e) {
  var x = e.clientX;
  var y = e.clientY;
  var newposX = x - 700;
  var newposY = y - 350;
  $(".stripe").css("transform", "translate3d(" + newposX + "px," + newposY + "px,0px)");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span class="word">More</span>
  <span class="arrow-wrap">
    <span class="arrow-pulse-right"></span>
  </span>
</div>

Answer 1

此处为工作代码。 https://jsbin.com/geyudivuru/edit?html,css,js,output

  <div class="parent" style="">
    <div class="stripe">
      <span class="word">More</span>
        <span class="arrow-wrap">
          <span class="arrow-pulse-right"></span>
        </span>
     <div>
  </div>

.stripe {
  width: 100%;
  background: red;
  position: absolute;
  height: 40px;
  display: none;
}
.parent {
  position: relative;
  height: 400px; 
  background: #ddd;
}

$ = jQuery;
$(document).on("mousemove", function(e) {
  var x = e.clientX;
  var y = e.clientY;
  var newposX = x - 700;
  var newposY = y;
  $('.stripe').css({top: newposY, display: 'block'})
});

$('.parent').mouseleave(function(){
  $('.stripe').css({top: 0, display: 'none'})
})

为div添加样式，您将获得所需的内容。

使用鼠标指针移动div

1 个答案: