Как увеличить картинку, когда на неё кликают | Все что вы хотели знать о хостинге и сайтостроении

Как увеличить картинку, когда на неё кликают


Рубрика: JavaScript, jQuery

На самом деле это очень просто. Для начала сделаем короткий html.

<img id="image" src="/image.png" alt="" />
<p>Click To Zoom In</p>

Тут мы имеем картинку и параграф. Мы могли использовать и другой тэг вместо параграфа. Я хотел показать, как мы можем задать событие по клику для любого элемента.

$(document).ready(function()
{
$("#image").css("width", "100px");
$("#image").toggle(function()
{
$(this).animate({width: "300px"}, 1000);
$('p').text("Click To Zoom Out");

}, function(){
$(this).animate({width: "100px"}, 1000);
$('p').text("Click To Zoom In");
});
});

Шаг за шагом:

$(document).ready(function()
{
$("#image").css("width", "100px");

$(document).ready(function()
{
$(“#image”).css(“width”, “100px”);

Когда документ готов, мы задаем ширину элемента с id=”image” равную 100 пикселям.

$("#image").toggle(function()
{
$(this).animate({width: "300px"}, 1000);
$('p').text("Click To Zoom Out");

Когда картинку кликнули, мы запускаем метод toggle. Используя “toggle”, мы можем задать две функции. Первая будет запущена, когда картинку кликнули первый раз. Вторая – когда второй раз кликнули по картинке. Это наилучшее при использовании расширяющихся/уменьшающихся элементов.

Когда картинка кликнута первый раз, мы собираемся взять “this” (картинка, по которой кликнули) и анимировать её. Мы изменим ширину картинки до 300 точек и раздвинем её в течении секунды.

}, function(){
$(this).animate({width: "100px"}, 1000);
$('p').text("Click To Zoom In");

Когда картинку кликнули во второй раз, мы изменяем ширину картинки назад к 100 точкам и изменяем текст параграфа.

Теги: , , ,
Если вам понравилась статья или была полезна, поделитесь ею с друзьями: