Твиттер, подобный шарю, вытесняется + безговенно?

Question

У кого-нибудь есть идея сделать эффект маркировки, как Twitter? его беспокойный (DOENST прекращается ждать концов контура) + выцветание в начале и конце. Благодарю.

редактировать

ОК, редактировать, я нашел один полузависимый здесь http://jsbin.com/uyawi/3/Edit. Но его все еще отстают + не очень безстраненным, может быть, может быть использование CSS?

Answer 1

Посмотрите на их код. Они поместили два изображения PNG, которые исчезают от 100% непрозрачного до 100% прозрачного. Два элемента размещены в своих собственных <li>S в конце списка <li>S и внутри <ul>, а затем расположен с использованием CSS для плавания с обеих сторон <ul>.

Я настоятельно рекомендую использовать Firefox + Firebug или Safari / Chrome и панель инструментов разработчика. Все эти инструменты имеют функцию под названием «ISPECT Element», которые позволяют вам очень быстро свернуть до определенного элемента в документе и прочитать его CSS.

Править] Мне нужно построить скроллер на следующей неделе или около того, поэтому я написал что-то сегодня. Мой код будет интегрирован в Adobe Air, поэтому я не выполняю проверку кросс-браузера. CSS здесь, вероятно, нужно будет настроить. Я впервые попытался играть с Remy Sharp шелковистый гладкий шатер, но добавление того, что код уничтожает и воссоздает большую часть HTML, что сложно интегрировать прозрачные крылья. Код для построения скроллера не так усердно, поэтому я только что катился. Код ниже находится в пяти частях:

1. Изображение занавес

Для этого на работу я временно заимствовал изображение занавеской Twitter и сохранил его к моей Webroot в /images/left-right-fader.png. Отказ Их фейдер предназначен для определенной цветовой схемы, поэтому я буду заменять его своим собственным. Будьте хорошим гражданином и сделать свой собственный. Изображение в этом случае ширина 120px с левой занавесом на левом краю и правой завезе в точке [60,0]. Другими словами, это единственное изображение 120 пикселей, которое исчезает от непрозрачности на 100% на левом краю до 0% непрозрачности в середине до 100% непрозрачности на правом краю. Если вы измените размеры изображения, вам также нужно будет изменить CSS. Высота не имеет значения, потому что она плитка.

Дополнительные точки: если вы нацеливаете браузер WebKit или Firefox, вы сможете устранить изображение и использовать обычный HTML-элемент (Div / Span) с градиентным фоном.

2. CSS.

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;
}

3. MARQUEE 'CLASS'

Применение:

var mMarquee = new Marquee(jTarget,strText,intWidth);

1. jTarget Является ли ссылка на jQuery к пустой диверсистеме, где вы хотите, чтобы Scroller появится (например, если вы хотите, чтобы маркировать, чтобы появиться в <div id="myMarqueeDiv"></div>, вы бы использовали $('div#myMarqueeDiv')
2. strText - строка, которую вы хотите иметь свиток;
3. 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('&nbsp;'))
            .append($('<div class="fader left"></div>').html('&nbsp;'));
        intTextWidth = $(jTarget).find('.scrollingtext').width();
        jTarget.width(intWidth);
        jText.text(strText + " " + strText);
        update();
    };
    setup();
    setInterval(update,30);
    return self;
};

4. HTML

В этом конкретном примере мое тело выглядит так:

<body>
    <div id="marquee"></div>
</body>

5. Кодекс реализации

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);
});

Answer 2

Доступны некоторые новые атрибуты для MARQues - OnscrollStart и Onscrollend (я думаю) - вы можете использовать их для толочной непрозрачности содержимого. Или вы могли бы поставить промежуток вокруг шатер - сделать его позицией: относительное, тогда разместите 2 противоположных исчезновения PNGS в диапазоне (должность: абсолют; слева: 0 Другое вправо: 0), что будет работать реально ....