Question

实际上我想创建时间轴，其中有一系列用户可以滚动查看的部分，这些部分表示为一系列矩形形状，每个这样的部分需要连接到事件，再次重新进行检查像一个verticaly连接tooptips循环。

这里我希望将部分和事件作为图形对象，以便我可以向用户显示有关各个事件信息的pop。

有没有办法在javascript中创建其对象的图形形状。此外，当用户在该形状上移动时，我没有找到将光标显示为指针的方法。

Answer 1

尝试使用 html5 svg

制作的圈子代码

<!DOCTYPE html>
<html>
<body>
<div style="margin-left:100px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="400" cy="400" r="200" stroke="black" class='yellow_cir' stroke-width="2" fill="red" />
<circle cx="400" cy="400" r="150" stroke="black" class='yellow_cir' stroke-width="2" fill="yellow" />
<circle cx="400" cy="400" r="100" stroke="black" class='yellow_cir' stroke-width="2" fill="cyan" />
<circle cx="400" cy="400" r="50" stroke="black" class='yellow_cir' stroke-width="2" fill="cyan" />
  <defs>
     <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(100,100,105);stop-opacity:1" />
    </radialGradient>

     <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(10,10,105);stop-opacity:1" />
    </radialGradient>
  </defs>
</svg> 



</div>
</body>
</html> 
<style type="text/css">


.yellow_cir:hover{ fill:url("#grad2");cursor:pointer;
}
.yellow_cir
{
    fill:url("#grad1");
}
</style>

Answer 2

您可以使用jquery插件生成并显示Timeline。这可能会让您的工作更快。

我可以在HTML5画布中创建图形形状对象吗？如何在用户将鼠标悬停在形状上时将光标显示为指针

2 个答案: