Unit 21. Основы touch событий
Task 1.
Создайте блок div-1. Добавьте на него событие touchstart. Выведите в out-1 слово touch если событие сработает.
Task 2.
Создайте блок div-2. Добавьте на него событие touchstart. Выведите в out-2 число срабатываний события.
Task 3.
Создайте блок div-3_1 и div-3_2. Добавьте на них событие touchstart. Выведите в out-3 номер блока 1 или 2 на котором сработало событие.
Task 4.
Создайте блок div-4. И кнопку b-4. При нажатии кнопки - добавляйте событие ontouchstart на блок div-4. При событии происходит вывод текста touch в out-4.
Task 5.
Дана кнопка b-5. При ее нажатии очищайте событие ontouchstart на блоке div-4.
Task 6.
Добавьте событие ontouchend на div-4. При его срабатывании выведите в out-6 слово touchend.
Task 7.
Дан блок div-7. Добавьте событие touch, при срабатывании которого окрашивайте блок в красный цвет.
Task 8.
Дан блок div-8. Добавьте на него событие touch, которое при срабатывании окрашивает блок случаным цветом из массива a8=[red, green, blue, orange, pink, yellow]
Task 9.
Дан блок div-9. Добавьте событие ontouch. Выводите количество одновременных касаний в out-9.
Task 10.
Дан блок div-10. Добавьте на него событие touchmove. При срабатывании события - увеличивайте его ширину на 1.
Task 11.
Дан блок div-11. Добавьте на него событие touch. При срабатывании выводите радиус события radiusX, radiusY.
Task 12.
Изучите html код внутри div-12-wrapper.
1. Добавьте на кнопку nex событие click, touch так, чтобы при событии запускалась функция nextFunction и активным становилось изображение следующее за выделенным классом active-img (рамкой). Соответственно, на активном изображении появляется рамка, а остальные - лишаются рамки.
2. Добавьте на кнопку prev событие click, touch так, чтобы при событии запускалась функция prevFunction и активным становилось изображение до выделенного классом active-img (рамкой). Соответственно, на активном изображении появляется рамка, а остальные - лишаются рамки.
3. Учтите краевые эффекты - когда мы доходим до конца или начала, то нажатие кнопки должно приводить к перемещению рамки в начало или конец изображений.
4. Добавьте кнопку reset (функция resetFunction), нажатие которой сбрасывает активное изображение на нулевое.
5. Добавьте во все действия следующее - в изображении img-12-max заменяется src на активную. Т.е. произошло событие - заменилась главная картинка.
