日期:2014-05-16  浏览次数:20342 次

请教各位一个在网页上关于连线的问题
请看下面这张截图:

问题描述如下:网页上有两个复选框,现在需要做这样两件事:
(1)当用户单击了这两个复选框,复选框被选中,页面上需要画一条线将两个复选框连接起来。我想用<v:line>这个标签,但是具体不知道怎么用,请高手指教;
(2)当这两个复选框被线连接起来之后(此时两个复选框均处于checked==true状态),任意取消其中一个复选框的选择状态(即checked==false),这条线将消失。不知道这样的效果如何用javascript实现。
请高人指教这两个问题,小弟拜谢

------解决方案--------------------
http://www.scriptlover.com/controls/wheel/里面就有连线效果,你参考下。
------解决方案--------------------

基本实现方式:
定义一个0高度,宽度等于两点间距离的div,设置border为黑色、适当的宽度,通过绝对定位定位到合适的位置,css3熟悉旋转一个合适的角度就可以了


其中用到的位置、长度、角度都可以通过两点的坐标计算出来,这个挺简单的