用直线连接图元
Connecting Elements with a Line
我正在尝试用水平白线连接pin元素和timeline元素。有人知道如何使用javascript和css来做到这一点吗?请参阅下面的参考链接。
提前谢谢。
- Mike
http://mikedemar.com/devresources/timeline/example.png
http://mikedemar.com/devresources/timeline/index.html
将标记放在带有overflow: hidden
的容器中,并使用伪元素绘制线条:
HTML:
<ul>
<li class="handleicon"></li>
<li class="handleicon"></li>
<li class="handleicon"></li>
</ul>
CSS:
ul {
position: relative;
overflow: hidden;
height: 260px;
}
.handleicon {
position: absolute;
width: 33px;
height: 50px;
background: url(images/handlered.png);
}
.handleicon:before {
content: '';
width: 1px;
height: 400px;
background: #fff;
position: absolute;
top: 100%;
left: 50%;
}
小提琴在这儿:http://jsfiddle.net/AAPSg/
相关文章:
- 用直线连接图元
- 在多个图元(超过2个)上重复此操作
- 如果显示另一个折叠的图元,如何隐藏该图元
- 缩放仅适用于一个图元
- 从选择中排除图元
- 单击图元模拟Esc键
- 如果图元属于嵌套图元,请选择对其进行筛选的图元
- 主干:如何操作与视图关联的图元之外的图元
- 如何基于力沿弯曲路径移动图元
- 修改两个基于彼此的选择图元
- 在“视口”上更改“图元类型”
- 将挖空.js模型应用于多个图元
- 淡入视图中的图元,淡出视图时淡入淡出
- 使图元在从其中心拖动时调整大小
- 需要根据条件隐藏选定的图元
- 内联样式在替换图元时会导致问题
- 获取当前单击的相对于图元的坐标
- 选择不适用于动态创建的选择图元.总是选择最后一个选项
- 对两个单独的图元应用相同的切换
- 选择单击的图元,而不是其父图元