Динамическое изменение размеров изображения
Здравствуйте!
Моя задача создать эффект, который позволил бы при наведении на любую картинку, увеличивать ее до определенных размеров, и возвращать обратно. Тем самым показать динамическое изменение картинки пользователю. (P.S. создаю чисто для визуального эффекта, применять можно в фото галереях). Вот код:
<html>
<head>
<style>
.image {
width:100px;
height:100px;
cursor:pointer;
position:absolute;
}
</style>
<script>
function expand(elem) {
var imH = elem.offsetHeight;
var imW = elem.offsetWidth;
var posLeft = elem.offsetLeft;
var posTop = elem.offsetTop;
posLeft--;
posTop--;
imH++;
imW++;
if(imW <= 120) {
elem.style.left = posLeft;
elem.style.top = posTop;
elem.style.width = imW + 1;
elem.style.height = imH + 1;
timerID = setTimeout("expand()", 10);
}
}
function revert(elem) {
var imW = elem.offsetWidth;
var imH = elem.offsetHeight;
var posLeft = elem.offsetLeft;
var posTop = elem.offsetTop;
posLeft++;
posTop++;
imW--;
imH--;
elem.style.left = posLeft;
elem.style.top = posTop;
elem.style.width = imW - 1;
elem.style.height = imH - 1;
if(imW <= 102) {
return false
}
timerID = setTimeout("revert()", 20);
}
</script>
</head>
<body>
<img src="forScale.jpg" class="image" id="img1" onmouseover="expand(this)" onmouseout="revert(this)">
</body>
</html>
Вопрос: Подскажите, почему когда я передаю функциям параметр "elem" как аргумент ("revert(elem) & expand(elem)", а затем onmouseover="revert(this)" onmouseout="expand(this)"), то после "первого круга" выполнения этих ф-ций, у меня в фаербаге выдает ошибку "elem has no properties", и изменение прекращается. Объясните пожалуйста почему так происходит, и, если это возможно, подскажите как это исправить. Заранее благодарен. |
Задавайте новые вопросы в новых темах, пожалуйста.
Попробуйте в вызовах таймера поставить так:
timerID = setTimeout(function(){expand(elem)}, 10);
timerID = setTimeout(function(){revert(elem)}, 20);
У вас не передавался элемент, при вызове по тайм-ауту. |
Спасибо Андрей, т.е. таким вот методом timerID = setTimeout(function(){expand(elem)}, 10) надо пользоваться когда передаешь функции параметр как аргумент да?
|
Макс,
Да. Может можно еще как-то, но я обычно пользуюсь таким способом. |
Вложений: 1
Андрей, Вы бы не могли мне подсказать как мне быть с "глюками" картинок(не с теми глюками которыми Вы подумали;) ).
Просмотрите архив и быстро пробегите по изображениям. Т.е. когда я быстро "пробегаю" курсором миши по изображениям, то они бывают дрожат, ну а потом все восстанавливаются. Я предполагаю что это потому что условие, в функции которая увеличивает изображения(expand()), по смыслу такое же как и в ф-ции которая сжимает их(). И поэтому пока не выполнится expand() не начнется revert(). Может Вы подскажите в каком направлении мне думать чтоб этого избежать:D ? И еще, если у Вас есть ИЕ6, то там, при увеличении картинок, они слегка тормозят. От чего это зависит? От браузера? |
Изменение размера элемента DIV
Подскажите пожалуйста новичку!
Вот код:
<html>
<head>
<style>
#outer {
position:absolute;
width:50%;
height:325px;
background-color:lightsteelblue;
display:block;
overflow:hidden;
}
</style>
<script>
function minimaize() {
var relative = document.getElementById("outer");
var sizeHeight = relative.offsetHeight;
if(sizeHeight >= 25) {
sizeHeight--;
relative.style.height = sizeHeight - 9
}
timerID = setTimeout(function() {minimaize()}, 1);
}
function maximaize() {
var relative = document.getElementById("outer");
var sizeHeight = relative.offsetHeight;
if(sizeHeight <=300) {
sizeHeight++;
relative.style.height = sizeHeight + 9
}
timerID = setTimeout(function() {minimaize()}, 1);
}
function change(obj) {
if(document.getElementById("outer").style.height >= 25) {
obj.addEventListener("click", minimaize, false)
} else {
obj.addEventListener("click", maximaize, false)
}
}
</script>
</head>
<body>
<button onclick="change()">Show/Hide</button>
<div id="outer">
</div>
</body>
</html>
Как мне связать две ф-ции вместе, т.е. нажал на кнопку - открылось окно, нажал - закрылось. Но проблема в том что я не изменяю display = "block/none", и не меняю классы, а динамически увеличиваю и уменьшаю высоту элемента DIV, посредством двух функций minimaize() & maximaize(). Я не могу подобрать условие в ф-ции change(). Не хватает у меня винтиков, да и болтиков тоже. Подскажите как одной кнопке, в одном событии можно присвоить две ф-ции, или хотябы распределить их как в ф-ции change(), можно привести другой пример, не обязательно справлять этот, главное чтоб логика была понятна. Куда и в каком направлении мне двигаться? Жду Ваших отзывов. Заранее благодарен! |
Макс,
Для новых вопросов создавайте, пожалуйста, отдельные темы. Вы можете воспользоваться статической переменной, чтобы сделать функцию-реле, т.е. функцию в которой чередуется выполнение кода при каждом вызове, вот пример:
function change() {
var static = arguments.callee;
if(typeof static.state == "undefined")
static.state = false;
if(!static.state)
{
alert(0); // Тут ставите одно событие
static.state = true;
} else {
alert(1); // Тут ставите второе событие
static.state = false;
}
}
change()
change()
change()
change()
|
У меня не выходит. При первом нажатии выполняется условие 1, а при последующем, условие 2 просто останавливает условие 1.
|
| Часовой пояс GMT +3, время: 14:06. |