HTML5+CSS3+JS学习笔记-12-使用JS及函数来制作表格加上3D透视效果

来源：互联网发布：程序员刚入职啥也不会编辑：程序博客网时间：2024/06/05 09:34

把之前用JS制作的表格加上3D透视效果

截图：

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>使用JS函数来制作表格练习</title>
<script src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
//1、向body页面内添加一个div，id命名为world
$("body").append('<div id="world"></div>');
//2、在div内追加1个table，边框为1px，填充间距都是0
$("#world").append('<table border="1" cellspacing="0" cellpadding="0"></table>');
//3、给world设置样式，宽度高度，绝对定位页面水平垂直居中
$("#world").css({
"padding":"0px",
"height":"500px",
"width":"500px",
"margin":"50px auto",
"background-color":"#000",
"perspective": "500px" //透视效果
// "overflow": "hidden"
});

//4、给table设置样式，相当world水平垂直居中
$("table").css({
"margin":"10px auto",
"position":"relative",
"top":"-100px",
"transform":"rotateX(35deg)"//沿着X轴旋转35度
});
//5、设定循环变量 i，格子数变量 num，并设定初始化值
var i=0;
var num=12;
//6、在table内循环添加tr行标签，循环数量为 num
for (i=0;i<num;i++){
$("table").append(function(i){
return "<tr></tr>";
});
}
//7、在添加完tr行后，继续往里面添加td列标签，循环数量为 num
for (i=0;i<num;i++){
$("tr").append(function(i){
return "<td>"+i+"</td>";
});
}

//8、添加完表格数量后，给表格td设定css样式，高度和宽度,字体颜色居中
$("td").css({
"height":"40px",
"width":"40px",
"color":"#FFF000",
"text-align":"center"
});

});
</script>

</head>

<body>
</body>
</html>

0 0