这是一个演示。我怎样才能按顺序执行这些功能: 1. 放大 -> 2. 旋转 360 度 -> 3. 调整到放大前大小 -> 4. 改变颜色(切换)
$(document).ready(function() {
$('.tlist td div').click(function() {
$(this).css("z-index", "1000").animate({
width: '+=90px',
height: '+=90px',
fontSize: '300%',
zIndex: 1000
}, {
step: function(now, fx) {
$(this).css('-webkit-transform', 'rotate(360deg)');
},
duration: 'slow'
}).animate({
width: '-=90px',
height: '-=90px',
fontSize: '120%',
zIndex: 1
}).toggleClass('changeColor').css("z-index", "1");
});
});body {
width: 1340px;
text-align: center;
}
.tlist {
display: inline;
border-collapse: separate;
border-spacing: 2px 7px;
}
#rightT {
padding-left: 115px;
}
.tlist th {
font-size: 160%;
font-family: Sans-serif;
}
.tlist td {
width: 56px;
height: 54px;
border: 1px solid lightgrey;
}
.tlist td div {
position: absolute;
border: 1px solid lightgrey;
width: 45px;
color: white;
background-color: orange;
font-family: arial;
font-size: 120%;
text-align: center;
padding-top: 7px;
padding-bottom: 11px;
padding-left: 1px;
padding-right: 1px;
margin-top: -24px;
margin-left: 3px;
}
.tlist td div.changeColor {
color: black;
background-color: white;
border-color: red;
}
#left1,
#left2,
#left5,
#left6,
#left7,
#left8,
#left3,
#left4 {
text-align: right;
}
#right1,
#right2,
#right3,
#right4,
#right5,
#right6,
#right7,
#right8 {
text-align: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id='leftT' class='tlist'>
<tr>
<th></th>
<th id='a1'>1</th>
<th id='a2'>2</th>
<th id='a3'>3</th>
<th id='a4'>4</th>
<th id='a5'>5</th>
<th id='a6'>6</th>
<th id='a7'>7</th>
<th id='a8'>8</th>
</tr>
<tr>
<th id='left1'>15/F</th>
<td id='f1501'>
<div>1501</div>
</td>
<td id='f1502'>
<div>1502</div>
</td>
<td id='f1503'>
<div>1503</div>
</td>
<td id='f1504'>
<div>1504</div>
</td>
<td id='f1505'>
<div>1505</div>
</td>
<td id='f1506'>
<div>1506</div>
</td>
<td id='f1507'>
<div>1507</div>
</td>
<td id='f1508'>
<div>1508</div>
</td>
<th id='right1'>15/F</th>
</tr>
<tr>
<th></th>
<td id='f1401'>
<div>1401</div>
</td>
<td id='f1402'>
<div>1402</div>
</td>
<td id='f1403'>
<div>1403</div>
</td>
<td id='f1404'>
<div>1404</div>
</td>
<td id='f1405'>
<div>1405</div>
</td>
<td id='f1406'>
<div>1406</div>
</td>
<td id='f1407'>
<div>1407</div>
</td>
<td id='f1408'>
<div>1408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1301'>
<div>1301</div>
</td>
<td id='f1302'>
<div>1302</div>
</td>
<td id='f1303'>
<div>1303</div>
</td>
<td id='f1304'>
<div>1304</div>
</td>
<td id='f1305'>
<div>1305</div>
</td>
<td id='f1306'>
<div>1306</div>
</td>
<td id='f1307'>
<div>1307</div>
</td>
<td id='f1308'>
<div>1308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1201'>
<div>1201</div>
</td>
<td id='f1202'>
<div>1202</div>
</td>
<td id='f1203'>
<div>1203</div>
</td>
<td id='f1204'>
<div>1204</div>
</td>
<td id='f1205'>
<div>1205</div>
</td>
<td id='f1206'>
<div>1206</div>
</td>
<td id='f1207'>
<div>1207</div>
</td>
<td id='f1208'>
<div>1208</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1101'>
<div>1101</div>
</td>
<td id='f1102'>
<div>1102</div>
</td>
<td id='f1103'>
<div>1103</div>
</td>
<td id='f1104'>
<div>1104</div>
</td>
<td id='f1105'>
<div>1105</div>
</td>
<td id='f1106'>
<div>1106</div>
</td>
<td id='f1107'>
<div>1107</div>
</td>
<td id='f1108'>
<div>1108</div>
</td>
<th></th>
</tr>
<tr>
<th id='left2'>10/F</th>
<td id='f1001'>
<div>1001</div>
</td>
<td id='f1002'>
<div>1002</div>
</td>
<td id='f1003'>
<div>1003</div>
</td>
<td id='f1004'>
<div>1004</div>
</td>
<td id='f1005'>
<div>1005</div>
</td>
<td id='f1006'>
<div>1006</div>
</td>
<td id='f1007'>
<div>1007</div>
</td>
<td id='f1008'>
<div>1008</div>
</td>
<th id='right2'>10/F</th>
</tr>
<tr>
<th></th>
<td id='f901'>
<div>901</div>
</td>
<td id='f902'>
<div>902</div>
</td>
<td id='f903'>
<div>903</div>
</td>
<td id='f904'>
<div>904</div>
</td>
<td id='f905'>
<div>905</div>
</td>
<td id='f906'>
<div>906</div>
</td>
<td id='f907'>
<div>907</div>
</td>
<td id='f908'>
<div>908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f801'>
<div>801</div>
</td>
<td id='f802'>
<div>802</div>
</td>
<td id='f803'>
<div>803</div>
</td>
<td id='f804'>
<div>804</div>
</td>
<td id='f805'>
<div>805</div>
</td>
<td id='f806'>
<div>806</div>
</td>
<td id='f807'>
<div>807</div>
</td>
<td id='f808'>
<div>808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f701'>
<div>701</div>
</td>
<td id='f702'>
<div>702</div>
</td>
<td id='f703'>
<div>703</div>
</td>
<td id='f704'>
<div>704</div>
</td>
<td id='f705'>
<div>705</div>
</td>
<td id='f706'>
<div>706</div>
</td>
<td id='f707'>
<div>707</div>
</td>
<td id='f708'>
<div>708</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f601'>
<div>601</div>
</td>
<td id='f602'>
<div>602</div>
</td>
<td id='f603'>
<div>603</div>
</td>
<td id='f604'>
<div>604</div>
</td>
<td id='f605'>
<div>605</div>
</td>
<td id='f606'>
<div>606</div>
</td>
<td id='f607'>
<div>607</div>
</td>
<td id='f608'>
<div>608</div>
</td>
<th></th>
</tr>
<tr>
<th id='left3'>5/F</th>
<td id='f501'>
<div>501</div>
</td>
<td id='f502'>
<div>502</div>
</td>
<td id='f503'>
<div>503</div>
</td>
<td id='f504'>
<div>504</div>
</td>
<td id='f505'>
<div>505</div>
</td>
<td id='f506'>
<div>506</div>
</td>
<td id='f507'>
<div>507</div>
</td>
<td id='f508'>
<div>508</div>
</td>
<th id='right3'>5/F</th>
</tr>
<tr>
<th></th>
<td id='f401'>
<div>401</div>
</td>
<td id='f402'>
<div>402</div>
</td>
<td id='f403'>
<div>403</div>
</td>
<td id='f404'>
<div>404</div>
</td>
<td id='f405'>
<div>405</div>
</td>
<td id='f406'>
<div>406</div>
</td>
<td id='f407'>
<div>407</div>
</td>
<td id='f408'>
<div>408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f301'>
<div>301</div>
</td>
<td id='f302'>
<div>302</div>
</td>
<td id='f303'>
<div>303</div>
</td>
<td id='f304'>
<div>304</div>
</td>
<td id='f305'>
<div>305</div>
</td>
<td id='f306'>
<div>306</div>
</td>
<td id='f307'>
<div>307</div>
</td>
<td id='f308'>
<div>308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f201'>
<div>201</div>
</td>
<td id='f202'>
<div>202</div>
</td>
<td id='f203'>
<div>203</div>
</td>
<td id='f204'>
<div>204</div>
</td>
<td id='f205'>
<div>205</div>
</td>
<td id='f206'>
<div>206</div>
</td>
<td id='f207'>
<div>207</div>
</td>
<td id='f208'>
<div>208</div>
</td>
<th></th>
</tr>
<tr>
<th id='left4'>1/F</th>
<td id='f101'>
<div>101</div>
</td>
<td id='f102'>
<div>102</div>
</td>
<td id='f103'>
<div>103</div>
</td>
<td id='f104'>
<div>104</div>
</td>
<td id='f105'>
<div>105</div>
</td>
<td id='f106'>
<div>106</div>
</td>
<td id='f107'>
<div>107</div>
</td>
<td id='f108'>
<div>108</div>
</td>
<th id='right4'>1/F</th>
</tr>
</table>
<!-- Table on Right -->
<table id='rightT' class='tlist'>
<tr>
<th></th>
<th id='b1'>1</th>
<th id='b2'>2</th>
<th id='b3'>3</th>
<th id='b4'>4</th>
<th id='b5'>5</th>
<th id='b6'>6</th>
<th id='b7'>7</th>
<th id='b8'>8</th>
</tr>
<tr>
<th id='left5'>30/F</th>
<td id='f3001'>
<div>3001</div>
</td>
<td id='f3002'>
<div>3002</div>
</td>
<td id='f3003'>
<div>3003</div>
</td>
<td id='f3004'>
<div>3004</div>
</td>
<td id='f3005'>
<div>3005</div>
</td>
<td id='f3006'>
<div>3006</div>
</td>
<td id='f3007'>
<div>3007</div>
</td>
<td id='f3008'>
<div>3008</div>
</td>
<th id='right5'>30/F</th>
</tr>
<tr>
<th></th>
<td id='f2901'>
<div>2901</div>
</td>
<td id='f2902'>
<div>2902</div>
</td>
<td id='f2903'>
<div>2903</div>
</td>
<td id='f2904'>
<div>2904</div>
</td>
<td id='f2905'>
<div>2905</div>
</td>
<td id='f2906'>
<div>2906</div>
</td>
<td id='f2907'>
<div>2907</div>
</td>
<td id='f2908'>
<div>2908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2801'>
<div>2801</div>
</td>
<td id='f2802'>
<div>2802</div>
</td>
<td id='f2803'>
<div>2803</div>
</td>
<td id='f2804'>
<div>2804</div>
</td>
<td id='f2805'>
<div>2805</div>
</td>
<td id='f2806'>
<div>2806</div>
</td>
<td id='f2807'>
<div>2807</div>
</td>
<td id='f2808'>
<div>2808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2701'>
<div>2701</div>
</td>
<td id='f2702'>
<div>2702</div>
</td>
<td id='f2703'>
<div>2703</div>
</td>
<td id='f2704'>
<div>2704</div>
</td>
<td id='f2705'>
<div>2705</div>
</td>
<td id='f2706'>
<div>2706</div>
</td>
<td id='f2707'>
<div>2707</div>
</td>
<td id='f2708'>
<div>2708</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2601'>
<div>2601</div>
</td>
<td id='f2602'>
<div style='background-color:white;color:black;'>2602</div>
</td>
<td id='f2603'>
<div>2603</div>
</td>
<td id='f2604'>
<div>2604</div>
</td>
<td id='f2605'>
<div>2605</div>
</td>
<td id='f2606'>
<div>2606</div>
</td>
<td id='f2607'>
<div>2607</div>
</td>
<td id='f2608'>
<div>2608</div>
</td>
<th></th>
</tr>
<tr>
<th id='left6'>25/F</th>
<td id='f2501'>
<div>2501</div>
</td>
<td id='f2502'>
<div>2502</div>
</td>
<td id='f2503'>
<div>2503</div>
</td>
<td id='f2504'>
<div>2504</div>
</td>
<td id='f2505'>
<div>2505</div>
</td>
<td id='f2506'>
<div>2506</div>
</td>
<td id='f2507'>
<div>2507</div>
</td>
<td id='f2508'>
<div>2508</div>
</td>
<th id='right6'>25/F</th>
</tr>
<tr>
<th></th>
<td id='f2401'>
<div>2401</div>
</td>
<td id='f2402'>
<div>2402</div>
</td>
<td id='f2403'>
<div>2403</div>
</td>
<td id='f2404'>
<div>2404</div>
</td>
<td id='f2405'>
<div>2405</div>
</td>
<td id='f2406'>
<div>2406</div>
</td>
<td id='f2407'>
<div>2407</div>
</td>
<td id='f2408'>
<div>2408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2301'>
<div>2301</div>
</td>
<td id='f2302'>
<div>2302</div>
</td>
<td id='f2303'>
<div>2303</div>
</td>
<td id='f2304'>
<div>2304</div>
</td>
<td id='f2305'>
<div>2305</div>
</td>
<td id='f2306'>
<div>2306</div>
</td>
<td id='f2307'>
<div>2307</div>
</td>
<td id='f2308'>
<div>2308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2201'>
<div>2201</div>
</td>
<td id='f2202'>
<div>2202</div>
</td>
<td id='f2203'>
<div>2203</div>
</td>
<td id='f2204'>
<div>2204</div>
</td>
<td id='f2205'>
<div>2205</div>
</td>
<td id='f2206'>
<div>2206</div>
</td>
<td id='f2207'>
<div>2207</div>
</td>
<td id='f2208'>
<div>2208</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2101'>
<div>2101</div>
</td>
<td id='f2102'>
<div>2102</div>
</td>
<td id='f2103'>
<div>2103</div>
</td>
<td id='f2104'>
<div>2104</div>
</td>
<td id='f2105'>
<div>2105</div>
</td>
<td id='f2106'>
<div>2106</div>
</td>
<td id='f2107'>
<div>2107</div>
</td>
<td id='f2108'>
<div>2108</div>
</td>
<th></th>
</tr>
<tr>
<th id='left7'>20/F</th>
<td id='f2001'>
<div>2001</div>
</td>
<td id='f2002'>
<div>2002</div>
</td>
<td id='f2003'>
<div>2003</div>
</td>
<td id='f2004'>
<div>2004</div>
</td>
<td id='f2005'>
<div>2005</div>
</td>
<td id='f2006'>
<div>2006</div>
</td>
<td id='f2007'>
<div>2007</div>
</td>
<td id='f2008'>
<div>2008</div>
</td>
<th id='right7'>20/F</th>
</tr>
<tr>
<th></th>
<td id='f1901'>
<div>1901</div>
</td>
<td id='f1902'>
<div>1902</div>
</td>
<td id='f1903'>
<div>1903</div>
</td>
<td id='f1904'>
<div>1904</div>
</td>
<td id='f1905'>
<div>1905</div>
</td>
<td id='f1906'>
<div>1906</div>
</td>
<td id='f1907'>
<div>1907</div>
</td>
<td id='f1908'>
<div>1908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1801'>
<div>1801</div>
</td>
<td id='f1802'>
<div>1802</div>
</td>
<td id='f1803'>
<div style='background-color:white;color:black;'>1803</div>
</td>
<td id='f1804'>
<div>1804</div>
</td>
<td id='f1805'>
<div>1805</div>
</td>
<td id='f1806'>
<div>1806</div>
</td>
<td id='f1807'>
<div>1807</div>
</td>
<td id='f1808'>
<div>1808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1701'>
<div>1701</div>
</td>
<td id='f1702'>
<div>1702</div>
</td>
<td id='f1703'>
<div>1703</div>
</td>
<td id='f1704'>
<div>1704</div>
</td>
<td id='f1705'>
<div>1705</div>
</td>
<td id='f1706'>
<div>1706</div>
</td>
<td id='f1707'>
<div>1707</div>
</td>
<td id='f1708'>
<div>1708</div>
</td>
<th></th>
</tr>
<tr>
<th id='left8'>16/F</th>
<td id='f1601'>
<div>1601</div>
</td>
<td id='f1602'>
<div>1602</div>
</td>
<td id='f1603'>
<div>1603</div>
</td>
<td id='f1604'>
<div>1604</div>
</td>
<td id='f1605'>
<div>1605</div>
</td>
<td id='f1606'>
<div>1606</div>
</td>
<td id='f1607'>
<div>1607</div>
</td>
<td id='f1608'>
<div>1608</div>
</td>
<th id='right8'>16/F</th>
</tr>
</table>最佳答案
执行此操作的一种简单但最有效的方法是使用 css。
使用您自己的 fiddle 的简单 CSS 解决方案。
根据评论更新了答案。
$(document).ready(function() {
$('.tlist td div').click(function() {
var t = $(this)
t.removeClass('changeStyle');
setTimeout(function() {
t.addClass('changeStyle');
}, 10);
});
});body {
width: 1340px;
text-align: center;
}
.tlist {
display: inline;
border-collapse: separate;
border-spacing: 2px 7px;
}
#rightT {
padding-left: 115px;
}
.tlist th {
font-size: 160%;
font-family: Sans-serif;
}
.tlist td {
width: 56px;
height: 54px;
border: 1px solid lightgrey;
}
.tlist td div {
position: absolute;
border: 1px solid lightgrey;
width: 45px;
color: white;
background-color: orange;
font-family: arial;
font-size: 120%;
text-align: center;
padding-top: 7px;
padding-bottom: 11px;
padding-left: 1px;
padding-right: 1px;
margin-top: -24px;
margin-left: 3px;
}
.tlist td div.changeColor {
color: black;
background-color: white;
border-color: red;
}
#left1,
#left2,
#left5,
#left6,
#left7,
#left8,
#left3,
#left4 {
text-align: right;
}
#right1,
#right2,
#right3,
#right4,
#right5,
#right6,
#right7,
#right8 {
text-align: left;
}
@keyframes styleIt {
0% {}
25% {
transform: scale(1.5) rotate(0deg)
}
70% {
transform: scale(1.5) rotate(360deg);
}
100% {
transform: scale(1);
color: black;
background-color: white;
border-color: red;
}
}
.changeStyle {
animation: styleIt 1s forwards;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='leftT' class='tlist'>
<tr>
<th></th>
<th id='a1'>1</th>
<th id='a2'>2</th>
<th id='a3'>3</th>
<th id='a4'>4</th>
<th id='a5'>5</th>
<th id='a6'>6</th>
<th id='a7'>7</th>
<th id='a8'>8</th>
</tr>
<tr>
<th id='left1'>15/F</th>
<td id='f1501'>
<div>1501</div>
</td>
<td id='f1502'>
<div>1502</div>
</td>
<td id='f1503'>
<div>1503</div>
</td>
<td id='f1504'>
<div>1504</div>
</td>
<td id='f1505'>
<div>1505</div>
</td>
<td id='f1506'>
<div>1506</div>
</td>
<td id='f1507'>
<div>1507</div>
</td>
<td id='f1508'>
<div>1508</div>
</td>
<th id='right1'>15/F</th>
</tr>
<tr>
<th></th>
<td id='f1401'>
<div>1401</div>
</td>
<td id='f1402'>
<div>1402</div>
</td>
<td id='f1403'>
<div>1403</div>
</td>
<td id='f1404'>
<div>1404</div>
</td>
<td id='f1405'>
<div>1405</div>
</td>
<td id='f1406'>
<div>1406</div>
</td>
<td id='f1407'>
<div>1407</div>
</td>
<td id='f1408'>
<div>1408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1301'>
<div>1301</div>
</td>
<td id='f1302'>
<div>1302</div>
</td>
<td id='f1303'>
<div>1303</div>
</td>
<td id='f1304'>
<div>1304</div>
</td>
<td id='f1305'>
<div>1305</div>
</td>
<td id='f1306'>
<div>1306</div>
</td>
<td id='f1307'>
<div>1307</div>
</td>
<td id='f1308'>
<div>1308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1201'>
<div>1201</div>
</td>
<td id='f1202'>
<div>1202</div>
</td>
<td id='f1203'>
<div>1203</div>
</td>
<td id='f1204'>
<div>1204</div>
</td>
<td id='f1205'>
<div>1205</div>
</td>
<td id='f1206'>
<div>1206</div>
</td>
<td id='f1207'>
<div>1207</div>
</td>
<td id='f1208'>
<div>1208</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1101'>
<div>1101</div>
</td>
<td id='f1102'>
<div>1102</div>
</td>
<td id='f1103'>
<div>1103</div>
</td>
<td id='f1104'>
<div>1104</div>
</td>
<td id='f1105'>
<div>1105</div>
</td>
<td id='f1106'>
<div>1106</div>
</td>
<td id='f1107'>
<div>1107</div>
</td>
<td id='f1108'>
<div>1108</div>
</td>
<th></th>
</tr>
<tr>
<th id='left2'>10/F</th>
<td id='f1001'>
<div>1001</div>
</td>
<td id='f1002'>
<div>1002</div>
</td>
<td id='f1003'>
<div>1003</div>
</td>
<td id='f1004'>
<div>1004</div>
</td>
<td id='f1005'>
<div>1005</div>
</td>
<td id='f1006'>
<div>1006</div>
</td>
<td id='f1007'>
<div>1007</div>
</td>
<td id='f1008'>
<div>1008</div>
</td>
<th id='right2'>10/F</th>
</tr>
<tr>
<th></th>
<td id='f901'>
<div>901</div>
</td>
<td id='f902'>
<div>902</div>
</td>
<td id='f903'>
<div>903</div>
</td>
<td id='f904'>
<div>904</div>
</td>
<td id='f905'>
<div>905</div>
</td>
<td id='f906'>
<div>906</div>
</td>
<td id='f907'>
<div>907</div>
</td>
<td id='f908'>
<div>908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f801'>
<div>801</div>
</td>
<td id='f802'>
<div>802</div>
</td>
<td id='f803'>
<div>803</div>
</td>
<td id='f804'>
<div>804</div>
</td>
<td id='f805'>
<div>805</div>
</td>
<td id='f806'>
<div>806</div>
</td>
<td id='f807'>
<div>807</div>
</td>
<td id='f808'>
<div>808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f701'>
<div>701</div>
</td>
<td id='f702'>
<div>702</div>
</td>
<td id='f703'>
<div>703</div>
</td>
<td id='f704'>
<div>704</div>
</td>
<td id='f705'>
<div>705</div>
</td>
<td id='f706'>
<div>706</div>
</td>
<td id='f707'>
<div>707</div>
</td>
<td id='f708'>
<div>708</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f601'>
<div>601</div>
</td>
<td id='f602'>
<div>602</div>
</td>
<td id='f603'>
<div>603</div>
</td>
<td id='f604'>
<div>604</div>
</td>
<td id='f605'>
<div>605</div>
</td>
<td id='f606'>
<div>606</div>
</td>
<td id='f607'>
<div>607</div>
</td>
<td id='f608'>
<div>608</div>
</td>
<th></th>
</tr>
<tr>
<th id='left3'>5/F</th>
<td id='f501'>
<div>501</div>
</td>
<td id='f502'>
<div>502</div>
</td>
<td id='f503'>
<div>503</div>
</td>
<td id='f504'>
<div>504</div>
</td>
<td id='f505'>
<div>505</div>
</td>
<td id='f506'>
<div>506</div>
</td>
<td id='f507'>
<div>507</div>
</td>
<td id='f508'>
<div>508</div>
</td>
<th id='right3'>5/F</th>
</tr>
<tr>
<th></th>
<td id='f401'>
<div>401</div>
</td>
<td id='f402'>
<div>402</div>
</td>
<td id='f403'>
<div>403</div>
</td>
<td id='f404'>
<div>404</div>
</td>
<td id='f405'>
<div>405</div>
</td>
<td id='f406'>
<div>406</div>
</td>
<td id='f407'>
<div>407</div>
</td>
<td id='f408'>
<div>408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f301'>
<div>301</div>
</td>
<td id='f302'>
<div>302</div>
</td>
<td id='f303'>
<div>303</div>
</td>
<td id='f304'>
<div>304</div>
</td>
<td id='f305'>
<div>305</div>
</td>
<td id='f306'>
<div>306</div>
</td>
<td id='f307'>
<div>307</div>
</td>
<td id='f308'>
<div>308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f201'>
<div>201</div>
</td>
<td id='f202'>
<div>202</div>
</td>
<td id='f203'>
<div>203</div>
</td>
<td id='f204'>
<div>204</div>
</td>
<td id='f205'>
<div>205</div>
</td>
<td id='f206'>
<div>206</div>
</td>
<td id='f207'>
<div>207</div>
</td>
<td id='f208'>
<div>208</div>
</td>
<th></th>
</tr>
<tr>
<th id='left4'>1/F</th>
<td id='f101'>
<div>101</div>
</td>
<td id='f102'>
<div>102</div>
</td>
<td id='f103'>
<div>103</div>
</td>
<td id='f104'>
<div>104</div>
</td>
<td id='f105'>
<div>105</div>
</td>
<td id='f106'>
<div>106</div>
</td>
<td id='f107'>
<div>107</div>
</td>
<td id='f108'>
<div>108</div>
</td>
<th id='right4'>1/F</th>
</tr>
</table>
<!-- Table on Right -->
<table id='rightT' class='tlist'>
<tr>
<th></th>
<th id='b1'>1</th>
<th id='b2'>2</th>
<th id='b3'>3</th>
<th id='b4'>4</th>
<th id='b5'>5</th>
<th id='b6'>6</th>
<th id='b7'>7</th>
<th id='b8'>8</th>
</tr>
<tr>
<th id='left5'>30/F</th>
<td id='f3001'>
<div>3001</div>
</td>
<td id='f3002'>
<div>3002</div>
</td>
<td id='f3003'>
<div>3003</div>
</td>
<td id='f3004'>
<div>3004</div>
</td>
<td id='f3005'>
<div>3005</div>
</td>
<td id='f3006'>
<div>3006</div>
</td>
<td id='f3007'>
<div>3007</div>
</td>
<td id='f3008'>
<div>3008</div>
</td>
<th id='right5'>30/F</th>
</tr>
<tr>
<th></th>
<td id='f2901'>
<div>2901</div>
</td>
<td id='f2902'>
<div>2902</div>
</td>
<td id='f2903'>
<div>2903</div>
</td>
<td id='f2904'>
<div>2904</div>
</td>
<td id='f2905'>
<div>2905</div>
</td>
<td id='f2906'>
<div>2906</div>
</td>
<td id='f2907'>
<div>2907</div>
</td>
<td id='f2908'>
<div>2908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2801'>
<div>2801</div>
</td>
<td id='f2802'>
<div>2802</div>
</td>
<td id='f2803'>
<div>2803</div>
</td>
<td id='f2804'>
<div>2804</div>
</td>
<td id='f2805'>
<div>2805</div>
</td>
<td id='f2806'>
<div>2806</div>
</td>
<td id='f2807'>
<div>2807</div>
</td>
<td id='f2808'>
<div>2808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2701'>
<div>2701</div>
</td>
<td id='f2702'>
<div>2702</div>
</td>
<td id='f2703'>
<div>2703</div>
</td>
<td id='f2704'>
<div>2704</div>
</td>
<td id='f2705'>
<div>2705</div>
</td>
<td id='f2706'>
<div>2706</div>
</td>
<td id='f2707'>
<div>2707</div>
</td>
<td id='f2708'>
<div>2708</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2601'>
<div>2601</div>
</td>
<td id='f2602'>
<div style='background-color:white;color:black;'>2602</div>
</td>
<td id='f2603'>
<div>2603</div>
</td>
<td id='f2604'>
<div>2604</div>
</td>
<td id='f2605'>
<div>2605</div>
</td>
<td id='f2606'>
<div>2606</div>
</td>
<td id='f2607'>
<div>2607</div>
</td>
<td id='f2608'>
<div>2608</div>
</td>
<th></th>
</tr>
<tr>
<th id='left6'>25/F</th>
<td id='f2501'>
<div>2501</div>
</td>
<td id='f2502'>
<div>2502</div>
</td>
<td id='f2503'>
<div>2503</div>
</td>
<td id='f2504'>
<div>2504</div>
</td>
<td id='f2505'>
<div>2505</div>
</td>
<td id='f2506'>
<div>2506</div>
</td>
<td id='f2507'>
<div>2507</div>
</td>
<td id='f2508'>
<div>2508</div>
</td>
<th id='right6'>25/F</th>
</tr>
<tr>
<th></th>
<td id='f2401'>
<div>2401</div>
</td>
<td id='f2402'>
<div>2402</div>
</td>
<td id='f2403'>
<div>2403</div>
</td>
<td id='f2404'>
<div>2404</div>
</td>
<td id='f2405'>
<div>2405</div>
</td>
<td id='f2406'>
<div>2406</div>
</td>
<td id='f2407'>
<div>2407</div>
</td>
<td id='f2408'>
<div>2408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2301'>
<div>2301</div>
</td>
<td id='f2302'>
<div>2302</div>
</td>
<td id='f2303'>
<div>2303</div>
</td>
<td id='f2304'>
<div>2304</div>
</td>
<td id='f2305'>
<div>2305</div>
</td>
<td id='f2306'>
<div>2306</div>
</td>
<td id='f2307'>
<div>2307</div>
</td>
<td id='f2308'>
<div>2308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2201'>
<div>2201</div>
</td>
<td id='f2202'>
<div>2202</div>
</td>
<td id='f2203'>
<div>2203</div>
</td>
<td id='f2204'>
<div>2204</div>
</td>
<td id='f2205'>
<div>2205</div>
</td>
<td id='f2206'>
<div>2206</div>
</td>
<td id='f2207'>
<div>2207</div>
</td>
<td id='f2208'>
<div>2208</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2101'>
<div>2101</div>
</td>
<td id='f2102'>
<div>2102</div>
</td>
<td id='f2103'>
<div>2103</div>
</td>
<td id='f2104'>
<div>2104</div>
</td>
<td id='f2105'>
<div>2105</div>
</td>
<td id='f2106'>
<div>2106</div>
</td>
<td id='f2107'>
<div>2107</div>
</td>
<td id='f2108'>
<div>2108</div>
</td>
<th></th>
</tr>
<tr>
<th id='left7'>20/F</th>
<td id='f2001'>
<div>2001</div>
</td>
<td id='f2002'>
<div>2002</div>
</td>
<td id='f2003'>
<div>2003</div>
</td>
<td id='f2004'>
<div>2004</div>
</td>
<td id='f2005'>
<div>2005</div>
</td>
<td id='f2006'>
<div>2006</div>
</td>
<td id='f2007'>
<div>2007</div>
</td>
<td id='f2008'>
<div>2008</div>
</td>
<th id='right7'>20/F</th>
</tr>
<tr>
<th></th>
<td id='f1901'>
<div>1901</div>
</td>
<td id='f1902'>
<div>1902</div>
</td>
<td id='f1903'>
<div>1903</div>
</td>
<td id='f1904'>
<div>1904</div>
</td>
<td id='f1905'>
<div>1905</div>
</td>
<td id='f1906'>
<div>1906</div>
</td>
<td id='f1907'>
<div>1907</div>
</td>
<td id='f1908'>
<div>1908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1801'>
<div>1801</div>
</td>
<td id='f1802'>
<div>1802</div>
</td>
<td id='f1803'>
<div style='background-color:white;color:black;'>1803</div>
</td>
<td id='f1804'>
<div>1804</div>
</td>
<td id='f1805'>
<div>1805</div>
</td>
<td id='f1806'>
<div>1806</div>
</td>
<td id='f1807'>
<div>1807</div>
</td>
<td id='f1808'>
<div>1808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1701'>
<div>1701</div>
</td>
<td id='f1702'>
<div>1702</div>
</td>
<td id='f1703'>
<div>1703</div>
</td>
<td id='f1704'>
<div>1704</div>
</td>
<td id='f1705'>
<div>1705</div>
</td>
<td id='f1706'>
<div>1706</div>
</td>
<td id='f1707'>
<div>1707</div>
</td>
<td id='f1708'>
<div>1708</div>
</td>
<th></th>
</tr>
<tr>
<th id='left8'>16/F</th>
<td id='f1601'>
<div>1601</div>
</td>
<td id='f1602'>
<div>1602</div>
</td>
<td id='f1603'>
<div>1603</div>
</td>
<td id='f1604'>
<div>1604</div>
</td>
<td id='f1605'>
<div>1605</div>
</td>
<td id='f1606'>
<div>1606</div>
</td>
<td id='f1607'>
<div>1607</div>
</td>
<td id='f1608'>
<div>1608</div>
</td>
<th id='right8'>16/F</th>
</tr>
</table>希望这对您有所帮助，如果您需要 jQuery 解决方案，请务必询问，ty..
关于javascript - 如何按顺序执行功能 : 1. 放大 -> 2. 旋转 360 度 -> 3. 调整到放大前的大小 -> 4. 更改颜色(切换)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45811121/