28.06.2008, 14:37
|
 |
Аспирант
|
|
Регистрация: 13.06.2008
Сообщений: 48
|
|
|
Динамическое изменение размеров изображения
Здравствуйте!
Моя задача создать эффект, который позволил бы при наведении на любую картинку, увеличивать ее до определенных размеров, и возвращать обратно.
Тем самым показать динамическое изменение картинки пользователю.
(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", и изменение прекращается.
Объясните пожалуйста почему так происходит, и, если это возможно,
подскажите как это исправить.
Заранее благодарен.
|
|
28.06.2008, 14:46
|
|
|
|
Регистрация: 21.02.2008
Сообщений: 1,250
|
|
Задавайте новые вопросы в новых темах, пожалуйста.
Попробуйте в вызовах таймера поставить так:
timerID = setTimeout(function(){expand(elem)}, 10);
timerID = setTimeout(function(){revert(elem)}, 20);
У вас не передавался элемент, при вызове по тайм-ауту.
Последний раз редактировалось Андрей Параничев, 28.06.2008 в 14:52.
|
|
28.06.2008, 16:02
|
|
Аспирант
|
|
Регистрация: 13.06.2008
Сообщений: 48
|
|
|
Спасибо Андрей, т.е. таким вот методом timerID = setTimeout(function(){expand(elem)}, 10) надо пользоваться когда передаешь функции параметр как аргумент да?
|
|
28.06.2008, 16:13
|
|
|
|
Регистрация: 21.02.2008
Сообщений: 1,250
|
|
|
Макс,
Да. Может можно еще как-то, но я обычно пользуюсь таким способом.
|
|
28.06.2008, 18:21
|
|
Аспирант
|
|
Регистрация: 13.06.2008
Сообщений: 48
|
|
Андрей, Вы бы не могли мне подсказать как мне быть с "глюками" картинок(не с теми глюками которыми Вы подумали  ).
Просмотрите архив и быстро пробегите по изображениям. Т.е. когда я быстро "пробегаю" курсором миши по изображениям, то они бывают дрожат, ну а потом все восстанавливаются. Я предполагаю что это потому что условие, в функции которая увеличивает изображения(expand()), по смыслу такое же как и в ф-ции которая сжимает их(). И поэтому пока не выполнится expand() не начнется revert(). Может Вы подскажите в каком направлении мне думать чтоб этого избежать  ?
И еще, если у Вас есть ИЕ6, то там, при увеличении картинок, они слегка тормозят. От чего это зависит? От браузера? |
|
21.07.2008, 12:36
|
|
Аспирант
|
|
Регистрация: 13.06.2008
Сообщений: 48
|
|
|
Изменение размера элемента 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(), можно привести другой пример, не обязательно справлять этот, главное чтоб логика была понятна.
Куда и в каком направлении мне двигаться?
Жду Ваших отзывов.
Заранее благодарен!
|
|
21.07.2008, 13:06
|
|
|
|
Регистрация: 21.02.2008
Сообщений: 1,250
|
|
Макс,
Для новых вопросов создавайте, пожалуйста, отдельные темы.
Вы можете воспользоваться статической переменной, чтобы сделать функцию-реле, т.е. функцию в которой чередуется выполнение кода при каждом вызове, вот пример:
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()
|
|
21.07.2008, 16:55
|
|
Аспирант
|
|
Регистрация: 13.06.2008
Сообщений: 48
|
|
|
У меня не выходит. При первом нажатии выполняется условие 1, а при последующем, условие 2 просто останавливает условие 1.
|
|
|
|
