Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.05.2010, 18:36
Новичок на форуме
Отправить личное сообщение для andronof Посмотреть профиль Найти все сообщения от andronof
 
Регистрация: 11.05.2010
Сообщений: 1

Изображение появляется не сразу.
Цель сделать бегущую строку что бы она была зацикленной.
Бегущая строка представляет собой подряд множество картинок.
Движение влево. Если первая скрывается полностью то она клонируется в конец div=movingtext-scroll и удаляется сначала.
Все работает, но есть одна проблема которая очень заметена.
При въезжании с права картинки которая была ранее перенесена туда из начала она появляется не постепенно а только тогда когда появиться полностью по ширине.
Как можно это вылечить?
Я так понимаю что браузер не подгружает картинку специально потому что она не видна в окне.
Буду рад и другим решениям.
Кроме flash!
Заранее спасибо.


Вот структура
<div class="movingtext">
               <div class="movingtext-marquee" id="movingtext-marquee" >
                <div id="movingtext-scroll"><a href="#"><img src="brands/brend1.jpg"></a><a href="#"><img src="brands/brend2.jpg"></a><a href="#"><img src="brands/brend3.jpg"></a><a href="#"><img src="brands/brend4.jpg"></a><a href="#"><img src="brands/brend5.jpg"></a><a href="#"><img src="brands/brend6.jpg"></a><a href="#"><img src="brands/brend7.jpg"></a><a href="#"><img src="brands/brend8.jpg"></a><a href="#"><img src="brands/brend9.jpg"></a><a href="#"><img src="brands/brend10.jpg"></a><a href="#"><img src="brands/brend11.jpg"></a><a href="#"><img src="brands/brend12.jpg"></a><a href="#"><img src="brands/brend13.jpg"></a><a href="#"><img src="brands/brend14.jpg"></a><a href="#"><img src="brands/brend15.jpg"></a><a href="#"><img src="brands/brend16.jpg"></a><a href="#"><img src="brands/brend17.jpg"></a><a href="#"><img src="brands/brend18.jpg"></a><a href="#"><img src="brands/brend19.jpg"></a><a href="#"><img src="brands/brend20.jpg"></a>   </div>
                </div>


Вот стиль:
.movingtext
{
height:92px;
}
.movingtext .movingtext-marquee
{
position:relative;
z-index:1;
overflow: hidden;
width: 100%;
height:92px;
}
.movingtext #movingtext-scroll
{
position:relative;
}

Вот код JQuery:
var left=0;
var movingtextscroll = $("#movingtext-scroll");
function animationmarquee()
{
	
	movingtextscroll.css("left",left+"px"); 
	if (left <= -$("#movingtext-scroll a:first img").get(0).clientWidth)
	{
		
		$("#movingtext-scroll a:first").clone().appendTo($("#movingtext-scroll"));
		$("#movingtext-scroll a:first").remove();
		movingtextscroll.css("left","0"); 
		left = 0;
	}
	
	left-=2;
	setTimeout(animationmarquee,1);
}
Ответить с цитированием
  #2 (permalink)  
Старый 13.05.2010, 00:26
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Попробуйте убрать пробелы после </a> и перед </div>.

И, кстати,
Сообщение от andronof
$("#movingtext-scroll a:first").clone().appendTo($("#movingtext-scroll"));
$("#movingtext-scroll a:first").remove();
зачем создавать новый элемент, копировать в него всё из старого, а потом прибивать старый, если можно просто перенести его в другое место?
$("#movingtext-scroll a:first").appendTo("#movingtext-scroll")
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающее изображение imagemap Pinot Элементы интерфейса 9 26.03.2010 21:42
фоновое изображение через fileUpload i8th Events/DOM/Window 4 25.02.2010 11:53
Как предварительно загруженное изображение сделать бэкграундом? hrundel Общие вопросы Javascript 1 02.08.2009 12:45
Можно ли приобразовать исходный текст изображения в само изображение )) human AJAX и COMET 7 20.03.2009 17:46
Изображение не растягивать dovee Общие вопросы Javascript 1 10.02.2009 07:20