Форум

moshensky · #1 (**permalink**) 11.06.2014, 21:16

Здравствуйте ув. форумчане.
Есть табличка:

<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" чтобы оно срабатывало по клику.

рони · #2 (**permalink**) 12.06.2014, 10:39

moshensky,

<!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>

Форум

Справочник

Discord чат

Курсы javascript