我正在尝试创建一个水平事件时间轴,我可以在其中显示有关悬停的一些数据。这是我到目前为止所做的:
HTML:
<div class="container">
<div class="timeline">
<table class="table table-responsive" style="border-color: transparent;">
<tbody>
<tr>
<td>
<div class="grow">
<p style="font-size: 1.25em"><i class="fa fa-book"></i>
<br>2007</p>
</div>
</td>
<td>
<div class="grow">
<p style="font-size: 1.25em"><i class="fa fa-book"></i>
<br>2009</p>
</div>
</td>
<td>
<div class="grow">
<p style="font-size: 1.25em"><i class="fa fa-graduation-cap"></i>
<br>2013</p>
</div>
</td>
<td>
<div class="grow">
<p style="font-size: 1.25em"><i class="fa fa-suitcase"></i>
<br>Present</p>
</div>
</td>
</tr>
</tbody>
</table>
<svg width="100%">
<line x1="100%" y1="0" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:5" />
</svg>
</div>
</div>
CSS:
timeline {
padding-top: 50px;
}
.grow {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition: all 0.3s ease;
}
.grow:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
transition: all 0.3s ease;
}
JS小提琴: https://jsfiddle.net/Lmgyzr50/3/
我正在尝试在此演示页面中实现类似下面的时间线:
它位于主页本身的Our Experts选项卡上方。
请告诉我如何实现这一目标。
答案 0 :(得分:0)
我不得不重新构建css,html和javascript,继续前进,它就像示例一样。
更新小提琴:https://jsfiddle.net/b7aew84c/8/
$("[link-assoc]").hide();
$("[link]").hover(function () {
$("[link-assoc="+$(this).attr("link")+"]")
.stop(true,true)
.slideToggle()
.siblings()
.stop(true,true)
.slideUp();
});
timeline {
padding-top: 50px;
}
.container {
height:100px;
}
#content {
position:absolute;
bottom:10px;
min-height:5px;
width:100%;
color:white;
background:rgb(255,0,0);
}
.container {
height:150px;
position:relative;
}
.grow {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition: all 0.3s ease;
}
.grow:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
transition: all 0.3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
<div class="container">
<div class="timeline">
<table class="table table-responsive" style="border-color: transparent;">
<tbody>
<tr>
<td>
<div class="grow" link="1">
<p style="font-size: 1.25em"><i class="fa fa-book"></i>
<br>2007</p>
</div>
</td>
<td>
<div class="grow" link="2">
<p style="font-size: 1.25em"><i class="fa fa-book"></i>
<br>2009</p>
</div>
</td>
<td>
<div class="grow" link="3">
<p style="font-size: 1.25em"><i class="fa fa-graduation-cap"></i>
<br>2013</p>
</div>
</td>
<td>
<div class="grow" link="4">
<p style="font-size: 1.25em"><i class="fa fa-suitcase"></i>
<br>Present</p>
</div>
</td>
</tr>
</tbody>
</table>
<div id="content">
<div link-assoc="1">
test1
</div>
<div link-assoc="2">
test2
</div>
<div link-assoc="3">
test3
</div>
<div link-assoc="4">
test4
</div>
</div>
</div>
</div>
答案 1 :(得分:0)
要像SVG中那样为线形设置动画,您需要变形路径的形状。
以下是使用SVG内置SMIL动画元素的示例。
<svg id="line1" width="100%" viewBox="0 -3 120 36">
<path d="M0,30 c20,0,40,0,60,0 c20,0,40,0,60,0"
style="fill:none;stroke:rgb(255,0,0);stroke-width:5">
<animate attributeName="d"
to="M0,30 c20,0,40,-30,60,-30 c20,0,40,30,60,30"
dur="0.2s"
begin="line1.mouseenter"
fill="freeze"/>
<animate attributeName="d"
to="M0,30 c20,0,40,0,60,0 c20,0,40,0,60,0"
dur="0.2s"
begin="line1.mouseleave"
fill="freeze"/>
</path>
</svg>
这是为您的每个列更新了其中一个SVG的小提琴。 https://jsfiddle.net/Lmgyzr50/4/
这是“简单”的方法。还有其他方法可以做到不涉及(几乎)相同SVG的多个副本。但是你需要使用Javascript。