Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Бесконечная бегущая строка 
:(
    Опции темы
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


--------------------
 
PM MAIL WWW ICQ MSN   Вверх
ksnk
Дата 7.12.2010, 09:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

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



Не так уж и вешает проц. у меня даже на 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
PM MAIL WWW Skype   Вверх
Google
  Дата 21.9.2017, 11:32 (ссылка)  





  Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Здесь публикуют скрипты, которые уже проверены в обсуждениях других тем (при этом полезно поставить ссылки на все смежные обсуждения) или переносятся кем-либо из модераторов по просьбе участников, если видно, что в результате обсуждения темы был написан полезный или интересный скрипт. Третий возможный вариант - участник форума публикует скрипт, заведомо известный как полезный и эффективный, для, возможно, небольшой доработки и обсуждения.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Наши скрипты | Следующая тема »


 




[ Время генерации скрипта: 0.1353 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.