VPF::Бесконечная бегущая строка - Форум программистов

DEER

Дата 7.12.2010, 00:41 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 749
Регистрация: 12.4.2005
Где: г. Рязань

Репутация: нет
Всего: 13

Всем привет. Выставляю вам свое детище сегодняшнее.
Задача - на главной должен быть список последних N новостей. Они должны быть в бегущей строке и между последним и первым элементом не должно быть разрывов.
Покопавшись в интернете, ничего толкового не нашел и изобрел свой велик. Надеюсь, что кому то будет полезно.
Так же надеюсь на советы по оптимизации работы кода, так как немного вешает проц. (по оптимизации внешнего вида кода не прошу smile

- это рабочая версия кода ).

код писался под prototype.js, оттестирован на FF, Opera, Chrome и IE

Код


<html>
<head>
    <title>Untitled</title>
    <script type="text/javascript" src="prototype.js"></script>

<style>
        .bl-imptnt_nav {clear: both; 
            float:left;width:100%;  overflow: hidden;
            }
            .bl-imptnt_nav ul {
                height:14px;overflow:hidden;
                }
                .bl-imptnt_nav ul li {
                    float:left; padding-right:10px;margin-right:6px; height:15px;overflow:hidden;
                    font-size:12px;
                    }
</style>

<script type="text/javascript">
var important_copyspeed = 1;
var currentOffset = 0;
var current_element;
document.observe("dom:loaded", function() {
    if( $('marquee') ) {
        initScroller('marquee');
        $('marquee').observe("mouseover", function() {
            important_copyspeed=0;
        });
        $('marquee').observe("mouseout", function() {
            important_copyspeed=1;
        });
    }
} );
function initScroller(id) {
     $(id).setStyle({ left: "0px" });
     
    var childs = $(id).childElements();
    current_element = childs[0];
    var len = childs.length;
    for(i=0; i<len;i++) {
        $(id).appendChild(new Element('li', { 'class': childs[i].className }).update(childs[i].innerHTML));
    }
     var oW = 0;
     $$('.imptnt_item').each(function(el) { oW += el.offsetWidth });
     var actualwidth=-oW;

     setTimeout('setInterval("doScroll(\''+id+'\', '+actualwidth+')",30)', 1000);
}

function doScroll(id, actualwidth) {
     var cross_marquee = $(id);
     
    cross_marquee.setStyle({ left: parseInt(cross_marquee.getStyle('left'))-important_copyspeed+"px" });
    if( -parseInt(cross_marquee.getStyle('left')) == currentOffset+current_element.getWidth()+8 ) {
        currentOffset += parseInt(current_element.getWidth())+8;
        cross_marquee.appendChild(new Element('li', { 'class': current_element.className }).update(current_element.innerHTML));

        if(current_element.previous()) {
            var first = current_element.previous();
            var pw = parseInt(first.getWidth())+8;
            var new_left = parseInt(cross_marquee.getStyle('left'))+pw;
            first.remove();
            cross_marquee.setStyle({ left: new_left+"px" });
            currentOffset -= pw;
        }

        current_element = current_element.next();
    }
}
</script>
</head>

<body>

                    <div class="bl-imptnt_nav">
                        <div id="marquee-parent" style="overflow: hidden;">
                        <div class="content" style="overflow: hidden; position: relative;">
                        <ul id="marquee" style="width:8000px; position:relative;">
                            <li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">первая ссылка</a></li>
                            <li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">вторая ссылка</a></li>
                            <li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">третья ссылка</a></li>
                            <li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">четвертая ссылка</a></li>
                            <li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">пятая ссылка</a></li>
                            <li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">шестая ссылка</a></li>
                            <li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">седьмая ссылка</a></li>
                            <li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">восьмая ссылка</a></li>
                        </ul>
                        </div>
                        </div>
                    </div>

</body>
</html>

Это сообщение отредактировал(а) DEER - 7.12.2010, 00:51

--------------------

ksnk

Дата 7.12.2010, 09:26 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 2
Всего: 386

Не так уж и вешает проц. у меня даже на ie6 гладко бежит строка, без особой нагрузки на процессор.
Можно посоветовать не добавлять элементы и уничтожать "уехавшие", а просто перемещать их в конец списка методом appendChild. Метод сам сначала удалит из списка своего чилда, а потом добавит в конец списка.

Еще мелкий апдейт -

Код


...
     setTimeout(function(){setInterval(function(){doScroll($(id), actualwidth)},30)}, 1000);
}
function doScroll(cross_marquee , actualwidth) {
    // var cross_marquee = $(id);
...

метод eval, который вызывается для работы со строковыми значениями setinterval довольно прожорлив насчет ресурсов, так что такое переписывание еще немного ослабит нагрузку.

В принципе, так как это не единственный скрипт на страничке, неплохо бы весь код инициализации обрамить функцией и скрыть внутренние переменные от внешнего мира, но это уже немного другая история.

возможно, если переписать все это хозяйство на чистый DOM, получится не сильно больше строк, чем сейчас...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Наши скрипты \| Следующая тема »