Сдвиг картинки-ссылки [Архив форума]

bpystep

21.11.2011, 19:01

<li><a href="#" onMouseOver="gogogo(this,29,0)" onMouseOut="gogogo(this, 60, -1)"><img src="css/images/q.png" width="100" height="20"></a></li>

function gogogo(node, i, sv) {
if (sv == 0) {
setTimeout(function() {node.style.left = i+1; i++; if (i<=60) gogogo(node, i, 0);},8);
}
else {
setTimeout(function() {node.style.left = i-1; i--; if (i>=29) gogogo(node, i, -1);},8);
}
}

Проблема в том, что при изменении положения указателя мыши начинает работать как if так и else. Думаю что проблему можно решить путем выделения определенной прямоугольной области, при наведении на который будет работать if, а за пределами есстественно else.
Просьба помочь оптимизировать или подкинуть какие-нибудь другие идеи.

bpystep

22.11.2011, 14:27

кто-нибудь ответит?

Pavel M.

22.11.2011, 14:49

что-то типа этого можно использовать
пример на jQuery
нужно навести на картинку

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>

<script type='text/javascript'>

$(window).load(function(){

$('div a').hover(
function () {
$(this).stop().animate({'margin-left': 30}, 300);
},
function () {
$(this).stop().animate({'margin-left': 0}, 300);
}
);

});

</script>

</head>
<body>

<div>
<a href="#"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></a>
</div>

</body>
</html>

bpystep

22.11.2011, 15:00

не силен в jQuery, и JS только начал изучать.
можете пояснить следующие моменты?
1. $(window).load(function() -- здесь мы подгружаем новую функцию?
2. $(this) - это $('div a')?
3. $('div a').hover - для чего hover?

p.s. благодарю.

Pavel M.

22.11.2011, 15:51

1. $(window).load(function() -- здесь мы подгружаем новую функцию?
2. $(this) - это $('div a')?
3. $('div a').hover - для чего hover?

1. ждем загрузки всей страницы со всеми элементами

2. в этом случае - да

3. http://api.jquery.com/hover/

bpystep

22.11.2011, 16:01

1. ждем загрузки всей страницы со всеми элементами

2. в этом случае - да

3. http://api.jquery.com/hover/

спасибо)

pagemaster

08.04.2013, 22:45

Здравствуйте!
Тема уже старая, но у меня возник похожий вопрос, помогите пожалуйста.
У меня есть круг (порезанный на куски) и когда я навожу на определенный кусок, он должен отодвигаться... Подскажите как это прописать? Со случаем вправо я уже разобрался)) методом тыка пробовал таким же образом задавать отступ вверх и вниз, но ничего не получается...

Заранее благодарен!

tsigel

09.04.2013, 09:30

А случай "вправо" - это какой случай?)

Четче сформулируйте вопрос, выложите простой кусок html и ваш скрипт.

pagemaster

09.04.2013, 16:20

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>

<script type='text/javascript'>

$(window).load(function(){

$('div a').hover(
function () {
$(this).stop().animate({'margin-left': 50}, 300);
},
function () {
$(this).stop().animate({'margin-left': 0}, 300);
}
);

});

</script>

</head>
<body>

<div>
<a href="#"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></a>
</div>

</body>
</html>

В данном случае прописывается margin-left 50 и изображение движется в право (так как отступ то левый) на 50 пикселей. Я пытался написать margin: 0 50 50 0; чтобы изображение двигалось вправо и вверх, но почему то не работает... подскажите как правильно прописывать в jQuery отступы, чтобы все работало) ну или я думал что может стоит прописывать не отступы, а задавать координаты относительно страницы, если это возможно, то подскажите как =) буду очень благодарен

tsigel

09.04.2013, 16:58

$(this).stop().animate({
'margin-left': 0,
'margin-top': '20px'
}, 300);

tsigel

09.04.2013, 16:59

вообще Обычно присваивают элементу position relative/absolute и изменяют left и top

pagemaster

09.04.2013, 19:02

$(window).load(function(){

$('div a').hover(
function () {
$(this).stop().animate({
'margin-left': '50px',
'margin-top': '20px'
}, 300);
},
function () {
$(this).stop().animate({
'margin-left': '0px',
'margin-top': '0px'
}, 300);
}
);

});
Вправо движется, а вниз нет... =( и это ведь по идеи должно получатся как то по диагонали движение?

pagemaster

09.04.2013, 19:03

если оставить только 'margin-top': '20px' то картинка не движется вниз...

pagemaster

09.04.2013, 23:05

ну помогите...
покажите кусок кода который бы двигал картинку вниз или по диагонали

pagemaster

09.04.2013, 23:19

и так же вопрос как указать элемент для перемещения, в случае указанном выше прописано $('div a') я так понимаю это указывается что в блоке div будет двигаться элемент в теге <a></a>, а как указать на пример чтобы использовался определенный блок по его id? На пример пишем <div id="1">картинка<div> и чтобы именно этот блок работал со скриптом

tsigel

10.04.2013, 09:48

pagemaster

10.04.2013, 14:40

спасибо за ответ)
моя ошибка была в том что картинке не была прописана "position"

а не подскажите еще как мне использовать данный скрипт для определенной картинки? просто сейчас используется ко всем тегам a в div
я хотел прописывать картинке свой id и указывать его в скрипте, как это сделать?

pagemaster

10.04.2013, 18:03

люди добрые и не очень =)
помогите пожалуйста, как изменить вот эту строчку $('div a').hover( так, чтобы указать div по его id

$('div id="1"').hover( как то так?

animhotep

10.04.2013, 18:48

$("#id1").hover

pagemaster

11.04.2013, 03:41

Вот так?
<script>
$(window).load(function(){

$("#id1").hover(
function (this) {
$(this).stop().animate({
'left': '465px',
'top': '422px'
}, 800);
},
function () {
$(this).stop().animate({
'left': '465px',
'top': '422px'
}, 800);
}
);

});

</script>

</div>

<div id="1"> <a href="#" id="image1" style="position:absolute; overflow:hidden; left:465px; top:922px; width:180px; height:255px; z-index:0"><img src="images/1.png" alt="" border=0 width=180 height=255></a></div>
Почему то не работает... что не так?

tsigel

11.04.2013, 09:43

$("#id1").hover(

$("#1").hover(

pagemaster

11.04.2013, 10:03

не работает... пробовал id тега <a> и <div>
<script>
$(window).load(function(){

$("#1").hover(
function (this) {
$(this).stop().animate({
'left': '465px',
'top': '422px'
}, 800);
},
function () {
$(this).stop().animate({
'left': '465px',
'top': '422px'
}, 800);
}
);

});

</script>

</div>

<div id="1"> <a href="#" style="position:absolute; overflow:hidden; left:465px; top:922px; width:180px; height:255px; z-index:0"><img src="images/1.png"></a></div>

tsigel

11.04.2013, 10:11

Естественно не работает! И не должно работать. Вы присваиваете position absolute для ссылки, а двигать пытаетесь див.

tsigel

11.04.2013, 10:12

$("#1")
$("#1 a")

pagemaster

11.04.2013, 10:27

Смотрите, я с дива убрал id и поставил его тегу <a>, не работает.
Потом вернул все обратно и написал $("#1 a"), но тоже не работает!..
Вот весь код:
<script>
$(window).load(function(){

$("#1 a").hover(
function (this) {
$(this).stop().animate({
'left': '465px',
'top': '422px'
}, 800);
},
function () {
$(this).stop().animate({
'left': '465px',
'top': '422px'
}, 800);
}
);

});

</script>

</div>

<div id="1"> <a href="#" style="position:absolute; overflow:hidden; left:465px; top:922px; width:180px; height:255px; z-index:0"><img src="images/1.png"></a></div>

tsigel

11.04.2013, 10:30

pagemaster

11.04.2013, 10:35

мне кажется или он не работает?) текст не движется

pagemaster

11.04.2013, 10:35

во, заработало) все, спасибо огромное)) буду разбираться

tsigel

11.04.2013, 10:36

Что выдает консоль? Вы вообще подключили jQuery?

pagemaster

11.04.2013, 11:07

все, работает, jQuery конечно же подключил, ответы на все мои вопросы получил =) спасибо Вам