2

Необходимо создать картинку 300px на 300px, добавить возможность приближать и отдалять с помощью клавиш "+" и "-".

Не могу задать новое CSS значение элементу после условия if. К примеру, простой alert также не выводится.

$(document.body).append('<div class="div1" style="position:relative;border:5px solid black; width:300px; height:300px;"</div>');
$('.div1').append('<img id="img1" src="images/10.jpg" style="position: absolute; margin: auto;top: 0; left: 0; bottom: 0; right: 0; width: 300px; height: 300px;"/>');

$(document).ready(function() {
    $(document).keypress(function(event) {
        a = $('img').height(); //height
        b = $('img').width(); //width

        c = parseInt(a) + 10; //width plus one step Intvalue
        d = parseInt(b) + 10; //height plus one step Intvalue

        e = parseInt(a) - 10; //width minus one step Intvalue
        f = parseInt(b) - 10; //height minus one step Intvalue

        if (event.keyCode == 107) {
            $('img').css('width', d + 'px') //change css Intvalue + "px"
            $('img').css('height', c + 'px') //change css Intvalue + "px"
        }
        if (event.keyCode == 109) {
            $('img').css('height', e + 'px')//change css Intvalue + "px"
            $('img').css('width', c + 'px')//change css Intvalue + "px"
        }
    })
})
0

1 ответ 1

2

Коды клавиш "+" и "-" равны 43 и 45 соответственно, даже если вместо нормализованного event.which использовать event.keyCode.

Также код был несколько упрощён и улучшен. Например, нет смысла использовать parseInt() для обработки ширины и высоты изображения, так как .width() и .height() и так возвращают Number. А вот закэшировать $('img') в переменной смысл имеет, чтобы избавиться от необходимости искать элемент в документе много раз. $('body').append() было перенесено внутрь document.ready, чтобы скрипт можно было размещать и в <head>.

Код целиком:

$(document).ready(function()
{
    $('body').append('<div class="div1" style="position:relative;border:5px solid black; width:300px; height:300px;"</div>');
    $('.div1').append('<img id="img1" src="images/10.jpg" style="position: absolute; margin: auto;top: 0; left: 0; bottom: 0; right: 0; width: 300px; height: 300px;"/>');

    $(document).on("keypress", function(event)
    {
        var image = $('img');
        var imageWidth = image.width();
        var imageHeight = image.height();
        if (event.which == 43 || event.which == 45)
        {
            var sizeChange = (event.which == 43) ? 10 : -10;
            image.css('width', (imageWidth + sizeChange) + "px");
            image.css('height', (imageHeight + sizeChange) + "px");
        }
    });
});

Пример в fiddle.

5
  • Спасибо большое, Вы помогли!
    – Dmitriy
    14 июн 2015 в 10:59
  • 1
    @Dmitriy, так отметьте как решенный, это лучше чем просто "спасибо", которое нарушает правила. 14 июн 2015 в 14:00
  • 1
    ок, я поставил зеленую галочку под Вашим ответов, этого достаточно или еще что-то нужно сделать, я здесь в 1 раз
    – Dmitriy
    14 июн 2015 в 15:19
  • @Dmitriy нет, этого достаточно :)
    – Regent
    14 июн 2015 в 15:21
  • хахаха)), извините, не так прочитал, галочку поставил)
    – Dmitriy
    14 июн 2015 в 15:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.