用js做一个web版的连线题，求大神降临

modao1221 2012-05-18 05:35:50

假如在web页面上有两个表格，分别为tab1、tab2，tab1里面有字段a、b、c 三个字段，tab2里面有C、B、A 三个字段。现在想用线条把它们对应的大小写连接起来（可以用按钮触发，也可以直接连）。要求用js实现，svg/vml的，需要考虑跨浏览器！【求源码，或者有个demo】

...全文

301 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

001007009 2012-05-21

打赏
举报

楼主如果纯粹要代码的话，猪八戒网枪手多得很。。。

如果学习的话，为什么不试着自己写下呢？百度 google 那么强大，，，

有什么问题再贴上来，大家帮你。

modao1221 2012-05-21

打赏
举报

能帮在实现一下拖动效果么？[Quote=引用 3 楼的回复:]

这个可以 canvas，flash VML 来做， js动态生成很多点来画线，效率低。

写了个js生成div的，楼主参考下
HTML code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
……
[/Quote]

modao1221 2012-05-21

打赏
举报

@calmcrime 谢谢支持！

能帮在实现一下整体在页面上拖动的效果么？

001007009 2012-05-18

打赏
举报

这个可以 canvas，flash VML 来做， js动态生成很多点来画线，效率低。

写了个js生成div的，楼主参考下



<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="gb2312" />

		<title></title>

		<style>

			.point {

				position:absolute;

				width:1px; height:1px; overflow:hidden;

				background:#000;

			}

			.col {

				position:absolute; left:300px; top:100px;

				font-size:20px; font-weight:bold; text-align:center;

			}

			.right {

				left:500px;

			}

			p {

				width:20px;

				border:1px solid red;

			}

		</style>

	</head>

	<body>

		<div class="col">

			<p>a</p>

			<p>c</p>

			<p>b</p>

		</div>

		<div class="col right">

			<p>B</p>

			<p>A</p>

			<p>C</p>

		</div>		

		<script>

			var x = [];

			var y = [];

			document.onclick = function(e){	

				e = window.event || e;

				var tx = e.clientX;

				var ty = e.clientY;

				x.push(tx);

				y.push(ty);

				//console.log( x );

				//console.log( y );				

				if( x.length == 2 && y.length == 2 ){

					createLine(x[0], y[0], x[1], y[1]);

					x.length = 0;

					y.length = 0;

				}			

			}

			function point(x, y){

				var div = document.createElement('div');

				div.style.left = x + 'px';

				div.style.top = y + 'px';

				div.className = 'point';

				document.body.appendChild(div);

			}

						

			function createLine(x1,y1,x2,y2){

				var tmp, x, y;

				if(x1 >= x2){

					tmp = x1;

					x1 = x2;

					x2 = tmp;

					tmp = y1;

					y1 = y2;

					y2 = tmp;        

				}

				for(var i = x1 ; i < x2; i++){

					x = i;

					y = (y2 - y1)/(x2 - x1)*(x - x1)+y1;

					point(x,y);

				}

			}	 

		</script>

	</body>

</html>