<html>
<head>
<meta charset="UTF-8">
<title>animation</title>
<style>
#box {
height: 200px
width: 200px
background-color: aqua
position: absolute
left:0
margin-top:50px
}
input {
width: 100px
height: 30px
}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="前进">
<script>
var box = document.getElementById('box')
var bt = document.getElementsByTagName('input')
var timer = null
bt[0].onclick = function () {
ani(box,600)
}
function ani(ele,target) {
clearInterval(ele.timer)
ele.timer = setInterval(function() {
var step = (target - ele.offsetLeft)/10
step = step>0?Math.ceil(step):Math.floor(step)
ele.style.left = ele.offsetLeft + step + "px"
console.log(1)
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
ele.style.left = target + "px"
clearInterval(ele.timer)
}
},30)
}
</script>
</body>
</html>
这个是基础的表格，你可以去研究改一下就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="2" cellpadding="12">
<tr>
<td colspan="3">商品类目</td>
</tr>
<tr>
<td rowspan="3">虚拟</td>
<td>移动</td>
<td>联通</td>
</tr>
<tr>
<td>充值卡</td>
<td>彩票</td>
</tr>
<tr>
<td>梦幻</td>
<td>QQ</td>
</tr>
<tr>
<td rowspan="3">护肤</td>
<td>美容护肤</td>
<td>美体</td>
</tr>
<tr>
<td>彩妆</td>
<td>香水</td>
</tr>
<tr>
<td>个人护理</td>
<td>保健</td>
</tr>
</table>
</body>
</html>
