jQuery鼠标滑过横向时间轴样式(代码详解)

下面我将为你详细讲解“jQuery鼠标滑过横向时间轴样式(代码详解)”的完整攻略。

1. 项目简介

本项目实现了一个鼠标滑过横向时间轴的效果。鼠标滑过某个时间节点时，该节点会高亮显示，并显示该时间点对应的详细信息。

2. 实现细节

2.1 HTML结构

为了实现鼠标滑过横向时间轴的效果，我们需要使用HTML和CSS先创建出时间轴的基本样式。HTML结构如下：

<div class="timeline-wrap">
  <div class="timeline-items-wrap">
    <div class="timeline-item" data-time="2015"><span>2015</span></div>
    <div class="timeline-item" data-time="2016"><span>2016</span></div>
    <div class="timeline-item" data-time="2017"><span>2017</span></div>
    <div class="timeline-item" data-time="2018"><span>2018</span></div>
    <div class="timeline-item" data-time="2019"><span>2019</span></div>
    <div class="timeline-item" data-time="2020"><span>2020</span></div>
  </div>
  <div class="timeline-indicator-wrap">
    <div class="timeline-indicator"></div>
  </div>
</div>

<div class="timeline-info-wrap">
  <div class="timeline-info">
    <h3 class="timeline-info-title">2015</h3>
    <div class="timeline-info-content">
      <p>这是2015年的详细信息</p>
    </div>
  </div>
  <div class="timeline-info">
    <h3 class="timeline-info-title">2016</h3>
    <div class="timeline-info-content">
      <p>这是2016年的详细信息</p>
    </div>
  </div>
  <div class="timeline-info">
    <h3 class="timeline-info-title">2017</h3>
    <div class="timeline-info-content">
      <p>这是2017年的详细信息</p>
    </div>
  </div>
  <div class="timeline-info">
    <h3 class="timeline-info-title">2018</h3>
    <div class="timeline-info-content">
      <p>这是2018年的详细信息</p>
    </div>
  </div>
  <div class="timeline-info">
    <h3 class="timeline-info-title">2019</h3>
    <div class="timeline-info-content">
      <p>这是2019年的详细信息</p>
    </div>
  </div>
  <div class="timeline-info">
    <h3 class="timeline-info-title">2020</h3>
    <div class="timeline-info-content">
      <p>这是2020年的详细信息</p>
    </div>
  </div>
</div>

其中，.timeline-wrap用来包裹整个时间轴，.timeline-items-wrap用来包裹所有的时间节点，.timeline-item用来表示一个时间节点，每个时间节点都有data-time属性来表示它所对应的年份。.timeline-indicator-wrap和.timeline-indicator用来表示时间轴上的指示器，.timeline-info-wrap和.timeline-info用来表示每个时间节点对应的详细信息。

2.2 CSS样式

接下来，我们来写CSS样式。具体的样式详见代码。

2.3 jQuery代码

最后，我们需要使用jQuery来实现鼠标滑过横向时间轴的效果。具体的代码如下：

$(function () {
  var $timeline = $('.timeline-wrap');
  var $items = $('.timeline-item', $timeline);
  var $indicator = $('.timeline-indicator', $timeline);
  var $infoWrap = $('.timeline-info-wrap');
  var $info = $('.timeline-info', $infoWrap);

  var itemWidth = $items.width();
  var itemNum = $items.length;
  var wrapWidth = itemNum * itemWidth;

  $('.timeline-items-wrap', $timeline).css({ width: wrapWidth });

  $items.on('mouseenter', function () {
    var $this = $(this);
    var time = $this.data('time');
    var left = $this.index() * itemWidth;

    $indicator.css({ left: left });
    $info.hide();
    $('.timeline-info-title', $this.next()).text(time);
    $this.next().fadeIn(200);
  });

  $timeline.on('mouseleave', function () {
    $indicator.css({ left: '-99999px' });
    $info.hide();
  });
});

这段代码的功能主要是绑定时间轴上每个时间节点的mouseenter事件，当鼠标滑过某个时间节点时，它会高亮显示，并显示该时间点对应的详细信息；同时，指示器的位置会随着鼠标移动而滑动，直到鼠标离开时间轴区域时，指示器才会隐藏。

3. 示范说明

示范一

如果你想要在时间轴上添加新的时间节点，只需要在HTML中添加如下结构：

<div class="timeline-item" data-time="2021"><span>2021</span></div>

然后，调用以下代码使其生效：

var $timeline = $('.timeline-wrap');
var $items = $('.timeline-item', $timeline);
var itemWidth = $items.width();
var itemNum = $items.length;
var wrapWidth = itemNum * itemWidth;
$('.timeline-items-wrap', $timeline).css({ width: wrapWidth });

示范二

如果你想要修改时间节点的样式，只需要修改CSS中.timeline-item的样式即可。比如，你可以修改时间节点的背景色、字体大小等样式。

.timeline-item {
  display: inline-block;
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: #f5f5f5; /* 修改背景色为灰色 */
  font-size: 16px; /* 修改字体大小为16px */
  font-weight: bold;
  cursor: pointer;
  margin-right: 10px;
  position: relative;
  z-index: 1;
}

以上是本项目的完整攻略，希望对你有所帮助。