html+jquery生成单元格的对角线

最新推荐文章于 2024-12-13 16:23:39 发布

原创最新推荐文章于 2024-12-13 16:23:39 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用jQuery和CSS实现动态绘制HTML表格中单元格对角线的方法。通过对单元格宽度和高度的计算，确定对角线的角度和长度，并通过CSS的伪元素:before及transform属性来完成绘制。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<head>
	<style>
		table td {width: 200px; height: 150px; border: 1px solid #000;}
	</style>
</head>
<body onload="change()">
	<table>
		<tr>
			<td class="inline"></td>
		</tr>
	</table>
</body>
<script>
function change() {
	var top = 0;
	var left = 0;
	var length = 0;
	var angle = 0;
	var width = $('.inline').width();
	var height = $('.inline').height();

	//线条position设置为absolute时，坐标需要重新定位，获取单元格的偏移量作为线条的偏移量
	top = $('.inline').offset().top;
	left = $('.inline').offset().left;

	angle = Math.round(Math.atan(width/height)*180/Math.PI);//获取对角线角度，Math.atan()获取的是弧度，乘于180/pi得到角度
	length = Math.sqrt(width * width + height * height);//获取对角线长度，勾股定理

	$('style').append('.inline::before {content: ""; position: absolute; width: 1px;left: ' + left + 'px;top: ' + top + 'px;background-color: #000; transform-origin: top;height: ' + length + 'px; transform: rotate(-' + angle + 'deg);}');
	}
</script>

效果图