Здравствуйте.
Помогите с маленьким кодом на js.
Есть только два инпута для выбора ширины и высоты без формы и кнопок, а необходимо, чтоб картинка плавно меняла свои размеры, которые будут вводиться в эти инпуты.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНаша img:
<img src="images/logo/icon-256.png" class="one"/>
Вариант 1, С JQuery и CSS:
$(".one").mouseenter(function() {
$(this).css({
"-webkit-transition": "all 1s linear",
"width": "50px",
"height":"50px"
});
}) .mouseleave(function() {
$(this).css({
"-webkit-transition": "all 1s linear",
"width": "256px",
"height":"256px"
});
});
С примерами о взаимодействии CSS и JQuery посмотрите здесь.
Вариант 2, без CSS:
// increase factor
var factor = 2;
$('.one').click(function() {
$(this).animate({
top: '-=' + $(this).height() / factor,
left: '-=' + $(this).width() / factor,
width: $(this).width() * factor
});
});
Здесь с примерами о animate прочитайте.
Готовое решение, специально для автора:
HTML
<input type="text" size="40" class="width">
<input type="text" size="40" class="height">
<img src="images/logo/icon-256.png" class="one" />
JQuery:
$(".width").keypress(function(){
$(".one").css({
"-webkit-transition": "all 1s linear",
"width":$(this).val(),
"height": $(".height").val()
});
});
$(".height").keypress(function(){
$(".one").css({
"-webkit-transition": "all 1s linear",
"width":$(".width").val(),
"height": $(this).val()
});
});
Я, конечно, все понимаю, но готовые решения приводят к лени, а лень сами знаете к чему, посему советую понемногу изучать все самостоятельно. Да и не напасешься готовых ответов в программировании, даже столь простых штук.
.on('keypress', function(){ /* code */ });
? Анимация на js себя изживает, css в этом плане куда мощнее стала, да и это прямая обязанность именно css.
Я сделал так (делал для друпала, поэтому jquery обернуть возможно нужно будет по-другому).
html
<img src="#" class="one" />
jquery
(function($) {
$(document).ready(function() {
$('#edit-submitted-shirina, input').bind('keyUp change', function(){
var wvalue = $('#edit-submitted-shirina').val();
$("#bagbox").attr('width', wvalue);
});
$('#edit-submitted-vysota, input').bind('keyUp change', function(){
var hvalue = $('#edit-submitted-vysota').val();
$("#bagbox").attr('height', hvalue);
});
});
})(jQuery);