[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Увеличение изображения
ded
Здравствуйте. Как обратный процесс запустить по клику???

<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
Что тебе надо сделать?
ded
Сейчас при клике изображение увеличивается с 200 до 600 пикселей. Надо чтоб при повторном клике уменьшалось опять до 200px/

_____________
Старый конь борозды не испортит
123456
Как-то так.

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>
ded
Спасибо. Не работает, но в этом направлении я пока не думал. Попробую

_____________
Старый конь борозды не испортит
123456
ded
что не работает, если работает?

http://js.do/code/120767


обрати внимание, onclick="example(this)" передается this
ded
Блин. Тысячу извинений. Мало того что только начинаю вникать, так ещё за целый день и мозги и глаз "замылились"

Конечно работает!!! Спасибо!!!

А с ключом this вообще полный туман пока. Вроде нагулил про него достаточно, но чётко понять не могу.

_____________
Старый конь борозды не испортит
kaww
Цитата (ded @ 26.11.2016 - 12:57)
Конечно работает!

Но работает только с одной картинкой. С большим количеством изображений начнутся проблемы.
ded
А почему? У функции же нет привязки по имени.

Я попробовал добавил 5 картинок, правда взял их в блоки <p></p> и каждая работает отдельно. Ещё курсоры +- добвил - вообще класс.

Или я ещё чего-то не знаю?

Вообще-то конечная цель прикрутить эту опцию к вордпрессу

Вообще-то конечная цель JS понять. Логику.

_____________
Старый конь борозды не испортит
kaww
Цитата (ded @ 26.11.2016 - 15:25)
А почему?

Флаг a глобальный, он хранит состояние для одной картинки (увеличена или нет), и все остальные используют его. вот код 123456 но с парой изображений, попробуй кликнуть по первой а затем по второй http://js.do/code/120839
sergeiss
ded, на jQuery это сделать легко и просто. Делаешь анимацию, т.е. изменение любого свойства с одной величины на другую, в течение определенного времени. В твоем случае это будет размер изображения.

PS. Анимация в jQuery http://api.jquery.com/animate/

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
ded
И ещё вопрос. Зачем самый первый clearTimeout(t);

_____________
Старый конь борозды не испортит
ded
Цитата
на jQuery это сделать легко и просто

До jQuery я ещё не дошёл

_____________
Старый конь борозды не испортит
ded
Цитата
попробуй кликнуть по первой а затем по второй


Ага попробовал, понял. Но опять вопрос. При повторном-то клике нормально срабатывает.
Пойду копать что такое флаг.

_____________
Старый конь борозды не испортит
sergeiss
Цитата (ded @ 26.11.2016 - 18:48)
Пойду копать что такое флаг.

Это индикатор состояния так называют. Чаще всего тот, который имеет 2 состояния.

Цитата (ded @ 26.11.2016 - 18:34)
До jQuery я ещё не дошёл

Что значит "не дошел"? smile.gif Не обязательно же сначала изучить JS, а потом браться за jQuery. Это можно делать параллельно. Потому что jQuery не заменяет JS, т.к. является его частью. Он просто расширяет возможности использования JS.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.