у кого-нибудь есть идея сделать эффект бегущей строки, как в твиттере? его плавный (не останавливается, ожидая окончания цикла) + затухание в начале и в конце. Благодарю.
редактировать
хорошо, редактировать, я нашел здесь полупрозрачный http://jsbin.com/uyawi/3/edit но он все еще тормозит + не совсем без потоков, может быть, из-за использования css?
Взгляните на их код. Они разместили два изображения PNG, которые меняют цвет от 100% непрозрачности до 100% прозрачности. Два элемента помещаются внутри своих собственных <li> в конце списка <li> и внутри <ul>, а затем позиционируются с помощью CSS, чтобы плавать по обе стороны от <ul>.
Я настоятельно рекомендую использовать Firefox + Firebug или Safari / Chrome и панель инструментов разработчика. Все эти инструменты имеют функцию под названием «Проверить элемент», которая позволяет очень быстро перейти к определенному элементу в документе и прочитать его CSS.
[РЕДАКТИРОВАТЬ] Мне нужно создать скроллер на следующей неделе или около того, поэтому я кое-что написал сегодня. Мой код будет интегрирован в Adobe Air, поэтому я не проверяю кроссбраузерность. CSS здесь, вероятно, придется подправить. Сначала я попробовал поиграть с Silky Smooth Marquee от Реми Шарпа, но добавление этого кода разрушает и воссоздает большую часть HTML, что затрудняет интеграцию прозрачных крыльев. Код для создания скроллера не так уж и сложен, поэтому я просто накатил свой собственный. Код ниже состоит из пяти частей:
Чтобы это сработало, я временно позаимствовал изображение шторки Твиттера и сохранил его в корневом веб-каталоге /images/left-right-fader.png. Их фейдер предназначен для определенной цветовой схемы, поэтому я заменю его своим. Будь хорошим гражданином и тоже сделай свой собственный. Изображение в этом случае имеет ширину 120 пикселей с левой шторкой у левого края и правой шторкой в точке [60,0]. Другими словами, это одно изображение шириной 120 пикселей, непрозрачность которого изменяется от 100% по левому краю до 0% в середине и до 100% по правому краю. Если вы измените размеры изображения, вам также потребуется изменить CSS. Высота не имеет значения, потому что это плитка.
Дополнительные баллы: если вы ориентируетесь на браузер Webkit или Firefox, вы должны иметь возможность удалить изображение и использовать обычный элемент HTML (div / span) с градиентным фоном.
body,div {border:none;padding:0;margin:0;}
div#marquee {
position:relative;
overflow:hidden;
background-color:#000;
color:#ddd;
}
div#marquee div.scrollingtext {
position:relative;
display:inline;
white-space:nowrap;
}
div#marquee div.fader {
width:60px;
position:absolute;
background:url(/images/left-right-fader.png) repeat-y scroll 0 0 transparent;
top:0;
left:0;
}
div#marquee div.fader.left {
background-position:-60px 0;
left:auto;
right:0;
}
Использование:
var mMarquee = new Marquee(jTarget,strText,intWidth);
jTarget - это ссылка jQuery на пустой div, в котором должен отображаться скроллер (например, если вы хотите, чтобы область отображалась в <div id="myMarqueeDiv"></div>, вы должны использовать $('div#myMarqueeDiv')strText - строка, которую нужно прокрутить;intWidth - какой ширины вы хотите, чтобы скроллер был.Прямо сейчас он возвращает объект Marquee без общедоступных методов. Достаточно просто добавить несколько общедоступных методов (например, как stop() метод или restart() метод).
Вот код:
var Marquee = function(j,s,w) {
var self = this;
var jTarget = j;
var strText = s;
var intWidth = w;
var intPaddingLeft = 60;
var jText,intTextWidth;
var update = function() {
intPaddingLeft -= 2;
if (intPaddingLeft < -intTextWidth) {
intPaddingLeft += intTextWidth;
}
jText.css({'left':intPaddingLeft + 'px'});
};
var setup = function() {
jText = $('<div class="scrollingtext"></div>').text(strText);
jTarget
.append(jText)
.append($('<div class="fader"></div>').html(' '))
.append($('<div class="fader left"></div>').html(' '));
intTextWidth = $(jTarget).find('.scrollingtext').width();
jTarget.width(intWidth);
jText.text(strText + " " + strText);
update();
};
setup();
setInterval(update,30);
return self;
};
В этом конкретном примере мое тело выглядит так:
<body>
<div id="marquee"></div>
</body>
strLoremIpsum = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut...";
jQuery(function($) {
myMarquee = new Marquee($('div#marquee'),strLoremIpsum,500);
});
есть некоторые новые атрибуты, доступные для шатров - onscrollstart и onscrollend (я думаю) - вы можете использовать их, чтобы настроить непрозрачность содержимого. Или вы можете поместить промежуток вокруг выделения - сделайте его position: relative, а затем поместите 2 противоположных исчезающих png-файла в промежуток (position: absolute; left: 0, другой справа: 0), которые будут работать очень быстро ....
