Question

我有一个包含孩子的div，每个孩子都有一行文字。

<div id="aboutxt">
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div>
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div>
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div>
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div>
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div>
    <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div>
</div>

我正在尝试放大线，即在页面的（垂直）中间。另外它旁边的div应该放大，但不能像焦点那样多。假设，第10行现在位于页面的中间位置。因此，缩放应该是：

Line 1: zoom 1
Line 2: zoom 1
Line 3: zoom 1
Line 4: zoom 1
Line 5: zoom 1.1
Line 6: zoom 1.2
Line 7: zoom 1.3
Line 8: zoom 1.4
Line 9: zoom 1.5
Line 10: zoom 2
Line 11: zoom 1.5
Line 12: zoom 1.4
Line 13: zoom 1.3
Line 14: zoom 1.2
Line 15: zoom 1.1
Line 16: zoom 1
Line 17: zoom 1
Line 18: zoom 1

如你所见5个上一个邻居和5个下一个邻居已被放大并且具有挑战性的部分，我需要它在滚动时表现。因此，当父项向下/向上滚动时，缩放会根据所关注的行而改变。您之前可能已经看过这种效果。但我不知道它叫什么。希望我已经解释了我的意思。

Answer 1

如果这是您正在寻找的

$('.line').mouseover(function() {
  $(this).animate({
    'zoom': 1.2
  }, 100).css({
    'color': '#f00'
  });
  $(this).prev().animate({
    'zoom': 1.1
  }, 100).css({
    'color': '#000'
  });
  $(this).prev().prev().animate({
    'zoom': 1.0
  }, 100);
  $(this).next().animate({
    'zoom': 1.1
  }, 100).css({
    'color': '#000'
  });
  $(this).next().next().animate({
    'zoom': 1.0
  }, 100).css({
    'color': '#000'
  });
});
$('#aboutxt').mouseleave(function() {
  $('.line').animate({
    'zoom': 1.0
  }, 100).css({
    'color': '#000'
  });
});

#aboutxt {
  text-align: center;
}
#aboutxt .line {
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aboutxt">
  <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div>
  <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div>
  <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div>
  <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div>
  <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div>
  <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div>
  <div class="line">A_LINE_OF_THE_WHOLE_TEXT</div>
</div>

缩放到最垂直的中间线

1 个答案: