Увеличение размера изображения при нажатии на нее

@deivil300 · Регистрация: 27.11.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте, можно ли при нажатии на изображение увеличить его размер, и при повторном нажатии уменьшить его.
Какой функцией при этом пользоваться?

Заранее спасибо за уделенное мне время.

@Enterely · 01.12.2018, 00:12

Используя JQuery. Вариант 1:

1. Создаешь специальный контейнер, в котором у тебя будет открываться картинка.
Добавляем ему класс OpenImage и функцию на клик iViewClose();

HTML5
1
<div class='OpenImage'  onclick='iViewClose();'><img /></div>

2. Нужно написать стили и спрятать контейнер

CSS
1
2
.OpenImage{position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.9); z-index:999; display:none;}
.OpenImage img{width:auto; height:90%; margin:0 auto;}

3. Теперь преобразуем имеющиеся картинки на сайте, добавив к ним действие на клик. Вместо url вставляем путь к картинке.

HTML5
1
<img src='#' alt='#' onclick='iViewOpen(url);' />

4. Ну и все, теперь сама функция из двух строчек и простейший просмотрщик фотографий готов))

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function iViewOpen(url){
if(url != ""){
$(".OpenImage img").removeAttr("src");
$(".OpenImage img").attr("src",url);
$(".OpenImage").fadeIn(400);
}
}
 
function iViewClose(){
$(".OpenImage").fadeOut(400);
}

Добавлено через 7 минут
Используя JQuery, более грамотный Вариант 2:

Аналогично создаем контейнер просмотрщика в любом месте страницы

HTML5
1
<div class='OpenImage'  onclick='iViewClose();'><img /></div>

Абсолютно такой же CSS:

CSS
1
2
.OpenImage{position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.9); z-index:999; display:none;}
.OpenImage img{width:auto; height:90%; margin:0 auto;}

Но вот JS и картинки уже по-другому:
Допустим, у нас много изображений на сайте. Добавим идентификатор iView

HTML5
1
<img src='#' alt='#' id='iView' />

Далее пишем функцию

JavaScript
1
2
3
4
5
6
7
8
9
$("#iView").click(function() {
$(".OpenImage img").removeAttr("src");
$(".OpenImage img").attr("src",$(this).attr("src"));
$(".OpenImage").fadeIn(400);
});
 
function iViewClose(){
$(".OpenImage").fadeOut(400);
}

Собственно все ) Вообще конечно это максимально примитивное решение. Вообще посмотрите готовые просмотрщики, которые гораздо большее умеют.

TanaTiX · 01.12.2018, 12:08

Enterely, какое отношение ваш ответ имеет к флешу?

@RedHead90 · 08.12.2018, 01:50

как вариант, менять значения scaleX и scaleY у экранного объекта.

Новые блоги и статьи Все статьи Все блоги /
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .

@deivil300 0 / 0 / 0 Регистрация: 27.11.2015 Сообщений: 3

	AS 3.0 Увеличение размера изображения при нажатии на нее 27.11.2018, 18:01. Показов 2410. Ответов 3 Метки нет (Все метки) Здравствуйте, можно ли при нажатии на изображение увеличить его размер, и при повторном нажатии уменьшить его. Какой функцией при этом пользоваться? Заранее спасибо за уделенное мне время. 0

TanaTiX Модератор 2931 / 1790 / 180 Регистрация: 19.02.2011 Сообщений: 6,550
	01.12.2018, 12:08
	Enterely, какое отношение ваш ответ имеет к флешу? 0

@RedHead90 10 / 7 / 4 Регистрация: 11.04.2018 Сообщений: 14
	08.12.2018, 01:50
	как вариант, менять значения scaleX и scaleY у экранного объекта. 0