21.04.2011, 19:32
|
|
Кандидат Javascript-наук
|
|
Регистрация: 28.02.2011
Сообщений: 134
|
|
|
как по очереди прижимать объект влево,вправо
Доброго времени.
Надо сделать следующее: картинка сжимается вправо до 0px а потом разворачивается обратно, но опять с левой стороны вправо. И так бесконечно.
Все анимации работают, но right:0 и left:0 по очереди программа не понимает. Пробовал и css и addClass removeClass - ничего не работает.
Вот один из примеров:
var i=1,j;
function chisla (){
i++;
if(i%2>0){
j='left';
} else {
j='right';
}
$('#pic1').animate({j:'0','top':i},100,function(){
chisla();
});
}
chisla();
т.е. top:i - исправно работает и картинка ползет вниз. Как уметь прилеплять картинку к разным сторонам по очереди?
Спасибо заранее!
Последний раз редактировалось shaltay, 21.04.2011 в 19:34.
|
|
21.04.2011, 20:34
|
 |
prodigy
|
|
Регистрация: 01.11.2010
Сообщений: 503
|
|
|
Вы просто представьте как это работает.
В фазе сжимания нужно одновременно уменьшать width и увеличивать left на такое же значение, а в фазе разжимания просто увеличивать width. Это если картинка position absolute.
__________________
readOnly
|
|
21.04.2011, 20:55
|
|
Кандидат Javascript-наук
|
|
Регистрация: 28.02.2011
Сообщений: 134
|
|
Да, спасибо, отличное решение  СДелал так:
$('#pic1').animate({'width':'0px','left':'250px'},1500)
.animate({'width':'0px','left':'0px'},3000)
.animate({'width':'250px'},1500);
Работает. Но неужели не сделать никак проще? |
|
21.04.2011, 21:25
|
|
prodigy
|
|
Регистрация: 01.11.2010
Сообщений: 503
|
|
Куда уж проще.
|
Сообщение от shaltay
|
|
И так бесконечно.
|
вот без jQuery
<script type = "text/javascript">
window.onload = function(){
var img = document.getElementById("myimg"), open = true, width = 300, left = 0;
img.style.position = "absolute";
img.style.height = "100px";
(function(){
if(open){
img.style.left = left ++ + "px";
}
img.style.width = (open ? width -- : width ++) + "px";
if(width == 0){
open = false;
}
if(width == 300){
open = true;
}
window.setTimeout(arguments.callee, 10);
}())
}
</script>
<div class = "wrapper">
<img id = "myimg" src = "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>
</div>
__________________
readOnly
|
|
21.04.2011, 21:53
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
shaltay,
Вариант ...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#pic1{position: relative; width: 336px; height: 76px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(function() {
(function(){
$('#pic1').animate({'width':'0px','left':'336px'},1500, function(){
$('#pic1').css({left:'0px'})} ).animate({'width':'336px'},1500 );
arguments.callee()
})()
});
</script>
</head>
<body>
<img id="pic1" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
</body>
</html>
|
|
21.04.2011, 22:56
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
poorking,
В функции left никогда не возращаеться в исходное положение поэтому картинка как гусеница убежит в право ...
Исправленный вариант без jQuery ...
<img id = "myimg" src = "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/>
<script type = "text/javascript">
var a = document.getElementById("myimg"),
b = !0,
c = 300;
a.style.position = "absolute";
a.style.height = "100px";
(function () {
a.style.width = (b ? c-- : c++) + "px";
if (c == 0 || c == 300) b = !b;
a.style.left = (b && 300 - c || 0) + "px";
window.setTimeout(arguments.callee, 10)
})();
</script>
|
|
21.04.2011, 23:53
|
|
prodigy
|
|
Регистрация: 01.11.2010
Сообщений: 503
|
|
рони,
так автор сказал
|
Сообщение от shaltay
|
|
И так бесконечно.
|
- я так и сделал. Кто знает, зачем ему это))
__________________
readOnly
|
|
22.04.2011, 11:48
|
|
Кандидат Javascript-наук
|
|
Регистрация: 28.02.2011
Сообщений: 134
|
|
Сообщение от poorking
|
рони,
так автор сказал - я так и сделал. Кто знает, зачем ему это))
|
Вот для чего Только картинки изменить на нормальные и интересный эффект вроде бы.
http://shaspace.spb.ru/tripinadva_rect/ |
|
22.04.2011, 11:49
|
|
Кандидат Javascript-наук
|
|
Регистрация: 28.02.2011
Сообщений: 134
|
|
|
Сообщение от рони
|
shaltay,
Вариант ...
<!DOCTYPE html>
$(function() {
(function(){
$('#pic1').animate({'width':'0px','left':'336px'},1500, function(){
$('#pic1').css({left:'0px'})} ).animate({'width':'336px'},1500 );
arguments.callee()
})()
});
|
Спасибо за вариант! Скажите, а как именно сделана в этом коде зацикленность? |
|
22.04.2011, 13:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
Сообщение от shaltay
|
|
как именно сделана в этом коде зацикленность?
|
arguments.callee --> содержит ссылку на выполняющуюся функцию. поэтому последнее действие функции запустить саму себя ещё раз - равносильно chisla(); в вашем первом примере в 10 строке |
|
|
|
