Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.06.2014, 21:16
Новичок на форуме
Отправить личное сообщение для moshensky Посмотреть профиль Найти все сообщения от moshensky
 
Регистрация: 10.06.2014
Сообщений: 4

Анимация, таблица
Здравствуйте ув. форумчане.
Есть табличка:
<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Таблица псевдографикой Vit (X)HTML/CSS 3 27.11.2012 09:03
Не работает анимация при загрузки ajax ArtOs Общие вопросы Javascript 0 24.05.2012 17:52
jqgrid. таблица не отображается в Mozilla и Google Chrom skalka jQuery 0 19.07.2011 09:19
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 20:50
Цикличность анимация? SashaBorandi jQuery 1 25.12.2008 09:20