Изображение появляется не сразу.
Цель сделать бегущую строку что бы она была зацикленной.
Бегущая строка представляет собой подряд множество картинок. Движение влево. Если первая скрывается полностью то она клонируется в конец 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); } |
Попробуйте убрать пробелы после
</a> и перед </div> .И, кстати, Цитата:
$("#movingtext-scroll a:first").appendTo("#movingtext-scroll") |
Часовой пояс GMT +3, время: 20:45. |