Сдвиг картинки-ссылки
<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. Просьба помочь оптимизировать или подкинуть какие-нибудь другие идеи. |
кто-нибудь ответит?
|
что-то типа этого можно использовать
пример на 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>
|
не силен в jQuery, и JS только начал изучать.
можете пояснить следующие моменты? 1. $(window).load(function() -- здесь мы подгружаем новую функцию? 2. $(this) - это $('div a')? 3. $('div a').hover - для чего hover? p.s. благодарю. |
Цитата:
2. в этом случае - да 3. http://api.jquery.com/hover/ |
Цитата:
|
Здравствуйте!
Тема уже старая, но у меня возник похожий вопрос, помогите пожалуйста. У меня есть круг (порезанный на куски) и когда я навожу на определенный кусок, он должен отодвигаться... Подскажите как это прописать? Со случаем вправо я уже разобрался)) методом тыка пробовал таким же образом задавать отступ вверх и вниз, но ничего не получается... Заранее благодарен! |
А случай "вправо" - это какой случай?)
Четче сформулируйте вопрос, выложите простой кусок html и ваш скрипт. |
<!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 отступы, чтобы все работало) ну или я думал что может стоит прописывать не отступы, а задавать координаты относительно страницы, если это возможно, то подскажите как =) буду очень благодарен |
$(this).stop().animate({
'margin-left': 0,
'margin-top': '20px'
}, 300);
|
вообще Обычно присваивают элементу position relative/absolute и изменяют left и top
|
$(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);
}
);
});
Вправо движется, а вниз нет... =( и это ведь по идеи должно получатся как то по диагонали движение? |
если оставить только 'margin-top': '20px' то картинка не движется вниз...
|
ну помогите...
покажите кусок кода который бы двигал картинку вниз или по диагонали |
и так же вопрос как указать элемент для перемещения, в случае указанном выше прописано $('div a') я так понимаю это указывается что в блоке div будет двигаться элемент в теге <a></a>, а как указать на пример чтобы использовался определенный блок по его id? На пример пишем <div id="1">картинка<div> и чтобы именно этот блок работал со скриптом
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div>
<a href='#' style='width: 60px; height: 20px; position: absolute; top: 0; left: 0'>aaa</a>
</div>
<script>
$(window).load(function(){
$('div a').hover(
function () {
$(this).stop().animate({
'left': '50px',
'top': '20px'
}, 300);
},
function () {
$(this).stop().animate({
'left': '0px',
'top': '0px'
}, 300);
}
);
});
</script>
Не знаю что тут может не работать. |
спасибо за ответ)
моя ошибка была в том что картинке не была прописана "position" а не подскажите еще как мне использовать данный скрипт для определенной картинки? просто сейчас используется ко всем тегам a в div я хотел прописывать картинке свой id и указывать его в скрипте, как это сделать? |
люди добрые и не очень =)
помогите пожалуйста, как изменить вот эту строчку $('div a').hover( так, чтобы указать div по его id $('div id="1"').hover( как то так? |
$("#id1").hover
|
Вот так?
<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>
Почему то не работает... что не так? |
Цитата:
$("#1").hover(
|
не работает... пробовал 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>
|
Естественно не работает! И не должно работать. Вы присваиваете position absolute для ссылки, а двигать пытаетесь див.
|
Цитата:
$("#1 a")
|
Смотрите, я с дива убрал 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>
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div id='1'>
<a href='#' style='width: 60px; height: 20px; position: absolute; top: 0; left: 0'>aaa</a>
</div>
<div>
<a id='2' href='#' style='width: 60px; height: 20px; position: absolute; top: 0; left: 100px'>aaa</a>
</div>
<script>
$(window).load(function(){
$('#1 a').hover(
function () {
$(this).stop().animate({
'left': '50px',
'top': '20px'
}, 300);
},
function () {
$(this).stop().animate({
'left': '0px',
'top': '0px'
}, 300);
}
);
$('#2').hover(
function () {
$(this).stop().animate({
'left': '50px',
'top': '20px'
}, 300);
},
function () {
$(this).stop().animate({
'left': '100px',
'top': '0px'
}, 300);
}
);
});
</script>
|
мне кажется или он не работает?) текст не движется
|
во, заработало) все, спасибо огромное)) буду разбираться
|
Что выдает консоль? Вы вообще подключили jQuery?
|
все, работает, jQuery конечно же подключил, ответы на все мои вопросы получил =) спасибо Вам
|
| Часовой пояс GMT +3, время: 14:50. |