Здравствуйте. Как обратный процесс запустить по клику???
<img src="images/karta1.jpg" name="karta" width="200" onclick="example()">
function example(){
var w=document.karta.width;
if (w<600){
document.karta.width=w+1;
setTimeout("example()", 10);
}
}
_____________
Старый конь борозды не испортит
123456
25.11.2016 - 22:20
Что тебе надо сделать?
Сейчас при клике изображение увеличивается с 200 до 600 пикселей. Надо чтоб при повторном клике уменьшалось опять до 200px/
_____________
Старый конь борозды не испортит
123456
25.11.2016 - 23:04
Как-то так.
a можно заменить на data-атрибут
<img src="images/karta1.jpg" name="karta" width="200" onclick="example(this)">
<script type="text/javascript">
var t, a;
function example(e){
clearTimeout(t);
var w = e.width;
if (a) {
t = setInterval(function () {
if (w <= 200) clearTimeout(t);
e.width = w--;
}, 10);
} else {
t = setInterval(function () {
if (w >= 250) clearTimeout(t);
e.width = w++;
}, 10);
}
a = !a;
}
</script>
Спасибо. Не работает, но в этом направлении я пока не думал. Попробую
_____________
Старый конь борозды не испортит
123456
25.11.2016 - 23:53
dedчто не работает, если работает?
http://js.do/code/120767обрати внимание,
onclick="example(this)" передается
this
Блин. Тысячу извинений. Мало того что только начинаю вникать, так ещё за целый день и мозги и глаз "замылились"
Конечно работает!!! Спасибо!!!
А с ключом this вообще полный туман пока. Вроде нагулил про него достаточно, но чётко понять не могу.
_____________
Старый конь борозды не испортит
Цитата (ded @ 26.11.2016 - 12:57) |
Конечно работает! |
Но работает только с одной картинкой. С большим количеством изображений начнутся проблемы.
А почему? У функции же нет привязки по имени.
Я попробовал добавил 5 картинок, правда взял их в блоки <p></p> и каждая работает отдельно. Ещё курсоры +- добвил - вообще класс.
Или я ещё чего-то не знаю?
Вообще-то конечная цель прикрутить эту опцию к вордпрессу
Вообще-то конечная цель JS понять. Логику.
_____________
Старый конь борозды не испортит
Цитата (ded @ 26.11.2016 - 15:25) |
А почему? |
Флаг
a глобальный, он хранит состояние для одной картинки (увеличена или нет), и все остальные используют его. вот код
123456 но с парой изображений, попробуй кликнуть по первой а затем по второй
http://js.do/code/120839
sergeiss
26.11.2016 - 17:22
ded, на jQuery это сделать легко и просто. Делаешь анимацию, т.е. изменение любого свойства с одной величины на другую, в течение определенного времени. В твоем случае это будет размер изображения.
PS. Анимация в jQuery
http://api.jquery.com/animate/
_____________
*
Хэлп по PHP*
Описалово по JavaScript *
Хэлп и СУБД для PostgreSQL*
Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги. *
"накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
И ещё вопрос. Зачем самый первый clearTimeout(t);
_____________
Старый конь борозды не испортит
Цитата |
на jQuery это сделать легко и просто |
До jQuery я ещё не дошёл
_____________
Старый конь борозды не испортит
Цитата |
попробуй кликнуть по первой а затем по второй |
Ага попробовал, понял. Но опять вопрос. При повторном-то клике нормально срабатывает.
Пойду копать что такое флаг.
_____________
Старый конь борозды не испортит
sergeiss
26.11.2016 - 23:52
Цитата (ded @ 26.11.2016 - 18:48) |
Пойду копать что такое флаг. |
Это индикатор состояния так называют. Чаще всего тот, который имеет 2 состояния.
Цитата (ded @ 26.11.2016 - 18:34) |
До jQuery я ещё не дошёл
|
Что значит "не дошел"?
Не обязательно же сначала изучить JS, а потом браться за jQuery. Это можно делать параллельно. Потому что jQuery не заменяет JS, т.к. является его частью. Он просто расширяет возможности использования JS.
_____________
*
Хэлп по PHP*
Описалово по JavaScript *
Хэлп и СУБД для PostgreSQL*
Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги. *
"накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
Быстрый ответ:
Powered by dgreen
Здесь расположена полная версия этой страницы.