Анимация, таблица
Здравствуйте ув. форумчане.
Есть табличка:
<table class="grid">
<tr class="tableHead"><td class="tableLeft"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>0</td></tr>
<tr class="tableCenter"><td class="tableLeft">A</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">B</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">C</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">D</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">E</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">F</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">G</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">H</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">J</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">K</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
и сделал анимацию на CSS:
@keyframes animTable {
0% {border:0px;height:49px;width:49px;background-color:transparent}
30% {border:4px;height:41px;width:41px;background-color:transparent}
60% {border:1px;height:47px;width:47px;background-color:transparent}
100% {border:4px;height:41px;width:41px;background-color:transparent}
}
@-moz-keyframes animTable {
0% {border:0px;height:49px;width:49px;background-color:transparent}
30% {border:4px;height:41px;width:41px;background-color:transparent}
60% {border:1px;height:47px;width:47px;background-color:transparent}
100% {border:4px;height:41px;width:41px;background-color:transparent}
}
@-webkit-keyframes animTable {
0% {border:0px;height:49px;width:49px;background-color:transparent}
30% {border:4px;height:41px;width:41px;background-color:transparent}
60% {border:1px;height:47px;width:47px;background-color:transparent}
100% {border:4px;height:41px;width:41px;background-color:transparent}
}
#wrap1 {
border:0px #000 solid;
height:49px;
width:49px;
font-size:2em;
animation:animTable 2s 1;
-webkit-animation:animTable 2s 1;
}
Нужен скрипт, который при нажатии на ячейку запустит в ней эту анимацию. Если писать скрип слишком буторно,то просто напишите каким образом прилепить id="#wrap1" чтобы оно срабатывало по клику. |
moshensky,
:cray:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
@keyframes animTable {
0% {border:0px;height:49px;width:49px;background-color:transparent}
30% {border:4px;height:41px;width:41px;background-color:transparent}
60% {border:1px;height:47px;width:47px;background-color:transparent}
100% {border:4px;height:41px;width:41px;background-color:transparent}
}
@-moz-keyframes animTable {
0% {border:0px;height:49px;width:49px;background-color:transparent}
30% {border:4px;height:41px;width:41px;background-color:transparent}
60% {border:1px;height:47px;width:47px;background-color:transparent}
100% {border:4px;height:41px;width:41px;background-color:transparent}
}
@-webkit-keyframes animTable {
0% {border:0px;height:49px;width:49px;background-color:transparent}
30% {border:4px;height:41px;width:41px;background-color:transparent}
60% {border:1px;height:47px;width:47px;background-color:transparent}
100% {border:4px;height:41px;width:41px;background-color:transparent}
}
.wrap {
border:0px #000 solid;
height:49px;
width:49px;
font-size:2em;
animation:animTable 2s 1;
-webkit-animation:animTable 2s 1;
}
</style>
</head>
<body>
<table class="grid">
<tr class="tableHead"><td class="tableLeft"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>0</td></tr>
<tr class="tableCenter"><td class="tableLeft">A</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">B</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">C</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">D</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">E</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">F</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">G</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">H</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">J</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="tableCenter"><td class="tableLeft">K</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<script>
var table = document.querySelector('.grid');
table.onclick = function (event)
{var target = event? event.target: window.event.srcElement;
if(target.tagName == 'TD') {
document.querySelector('.wrap') && (document.querySelector('.wrap').classList.remove('wrap'));
target.classList.add('wrap')
}
}
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:05. |