jquery时间轴
时间: 2023-08-01 22:07:02 浏览: 63
jQuery是一种JavaScript库,它可以帮助我们更轻松地操作HTML和CSS,它本身并没有提供时间轴功能。但是,我们可以使用jQuery和CSS来轻松创建时间轴。下面是一个简单的例子:
HTML代码:
```
<div class="timeline">
<div class="timeline-item">
<div class="timeline-date">2021-06-01</div>
<div class="timeline-content">
<h3>事件标题</h3>
<p>事件描述</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2021-06-02</div>
<div class="timeline-content">
<h3>事件标题</h3>
<p>事件描述</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2021-06-03</div>
<div class="timeline-content">
<h3>事件标题</h3>
<p>事件描述</p>
</div>
</div>
</div>
```
CSS代码:
```
.timeline {
position: relative;
padding: 0;
list-style: none;
}
.timeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background-color: #ccc;
transform: translateX(-50%);
}
.timeline-item {
position: relative;
margin: 10px 0;
}
.timeline-date {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
padding: 0 10px;
border: 2px solid #ccc;
border-radius: 20px;
font-size: 14px;
font-weight: bold;
line-height: 40px;
}
.timeline-content {
position: relative;
margin-left: 30px;
}
.timeline-content h3 {
margin-top: 0;
}
.timeline-content p {
margin-bottom: 0;
}
```
jQuery代码:
```
$(function() {
$('.timeline-date').each(function() {
var date = $(this).text().trim();
var timestamp = (new Date(date)).getTime();
$(this).attr('data-timestamp', timestamp);
});
$('.timeline-date').on('click', function() {
var timestamp = $(this).attr('data-timestamp');
$('html, body').animate({
scrollTop: $('[data-timestamp="'+timestamp+'"]').offset().top
}, 500);
});
});
```
这个示例中,我们使用了一个HTML列表来表示时间轴,每个时间轴项目包含一个日期和事件描述。在CSS中,我们使用了绝对定位来创建时间轴线和时间轴日期。在jQuery中,我们使用了一个循环来将日期转换为时间戳,并将其存储在data-timestamp属性中。当用户单击日期时,我们使用jQuery的animate()函数来滚动到相应的时间轴项目。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)