Существует ли способ расти/уменьшать изображение на парении с помощью JQuery?
Строго говоря, это не так.
В большинстве современных систем байт составляет 8 двоичных битов, но в некоторых системах это не всегда имело место (многие старые компьютеры использовали 7 бит для представления символов ASCII (или байтов), а системы перфокарт часто основывались на битовые символы (например, байты)).
Если вы говорите о 8-битном байте, это может представлять любой диапазон, который вы пожелаете. Тем не менее, он может представлять только 256 различных значений , поэтому он обычно используется для представления 0..255 («байт без знака») или -128 .. + 127 («байт со знаком»).
5 ответов
Если ваше изображение позиционируется абсолютно по отношению к документу в CSS, остальная часть макета страницы не должна изменяться при анимации изображения.
Вы должны иметь возможность использовать функцию jQuery animate (). Код будет выглядеть примерно так:
$("#yourImage").hover(
function(){$(this).animate({width: "400px", height:"400px"}, 1000);},
function(){$(this).animate({width: "200px", height:"200px"}, 1000);}
);
В этом примере изображение с id = yourImage увеличивалось до 400 пикселей в ширину и высоту при наведении указателя мыши и возвращалось к 200 пикселей в ширину и высоту после завершения наведения. Тем не менее, ваша проблема больше связана с HTML / CSS, чем с jQuery.
Если вы действительно имеете в виду «не затрагивая макет», вам нужно больше сосредоточиться на CSS, чем на javascript.
Включенный javascript уже размещен здесь ... но чтобы убедитесь, что ваш макет не испорчен, вам нужно будет удалить изображение из потока макета.
Это можно сделать, разместив его абсолютно и установив его z-index на большее значение. Однако это не всегда самое чистое решение ... поэтому я бы порекомендовал вам поиграть с «position: relative» в родительском элементе DOM и «position: absolute» в стиле изображения.
Довольно интересно взаимодействие относительного и абсолютного. Вам стоит погуглить.
Ура, юр
Разве вы не можете использовать jQuery animate для реализации этого? Немного повозившись, это должно быть несложно.
Операции увеличения и уменьшения легко выполняются с помощью .animate :
$("#imgId").click(function(){
$(this).animate({
width: newWidth,
height: newHeight
}, 3000 );
});
Проблема в том, как это сделать, не меняя макет вашей страницы. Один из способов сделать это - разместить копию над содержимым. Другой вариант - абсолютно позиционировать изображение внутри относительного блока div фиксированного размера - хотя у IE могут быть проблемы с этим.
Вот существующая библиотека, которая, кажется, делает то, что вы просите http://justinfarmer.com /? p = 14
Вы можете обернуть изображение в div (или любой другой элемент html, который вы думаю, что это уместно, li и т. д.) со скрытым переполнением. Затем используйте jQuery .animate , чтобы увеличить этот div любым способом.
Так, например, html может быть
<div class="grower">
<img src="myimg.jpg" width="300" height="300" alt="my image">
</div>
Затем ваш css будет выглядеть так:
.grower {width:250px;height:250px;overflow:hidden;position:relative;}
Таким образом, ваше изображение по существу обрезается с помощью div, который затем вы можете увеличивать при любом событии, чтобы показать полный размер изображения с помощью jQuery
$('.grower').mouseover(function(){
//moving the div left a bit is completely optional
//but should have the effect of growing the image from the middle.
$(this).stop().animate({"width": "300px","left":"-25px"}, 200,'easeInQuint');
}).mouseout(function(){
$(this).stop().animate({"width": "250px","left":"0px"}, 200,'easeInQuint');
});;
NB: вы можете добавить дополнительные css в ваш js, например, увеличенный z-index для вашего div, чтобы он мог расти поверх макета и т. д.