в jQuery шатер, без мерцания, меньше потребление памяти, а не плагин


Я попытался с помощью jQuery, чтобы создать альтернативную шатер, и безуспешно. Он моргает и не останавливается при наведении. Я отредактировал и снова отредактированы и, наконец, вышел с помощью jQuery + JavaScript в беспорядок.

На JavaScript:

$(document).ready(function(){  
        marquee();
        var timeout=1;
        function marquee(){
            var margin= -($('#mydiv > div:eq(0)').outerHeight()+ 20);
            $('#mydiv > div:eq(0)').animate({'margin-top': margin+'px'},4000,function(){
                $('#mydiv > div:eq(2)').html($(this).html());
                $(this).html('').css({'margin-top':'0px'}).appendTo($('#mydiv'));
                loop();
            });
        }
        function loop(){     
            if(timeout)
            setTimeout(marquee,0); 
        }
        $('#mydiv').hover(function(){
                timeout = 0;
                $('#mydiv > div:eq(0)').stop(true);
        },function(){
                timeout = 1;
                marquee();
        });
    });

Разметка:

    <div id='mydiv' style='width:300px;height:300px;overflow:hidden'> 
    <div id='div1'>
        <h4> Advantages:</h4><br>
        <ul>
         <li>blah 1</li>
                 <li>blah 2</li>
                 <li>blah 3</li>
        </ul> 
    </div>
    <div id='div2'>
        <h4>Applications:</h4><br>
        <ul>
         <li>blah 1</li>
                 <li>blah 2</li>
                 <li>blah 3</li>
        </ul>
    </div>  
    <div id='div3'></div>

</div>


17151
2
задан 15 декабря 2011 в 06:12 Источник Поделиться
Комментарии
2 ответа

Несколько пунктов:


  • $(этот).код html(") будет выбрасывать содержимое #див1 (на первой итерации) и #див2 (на второй итерации). Если вы хотите шатер петли, это не сработает.

  • Это идеальный вариант использования для простой jQuery плагин (см. документацию).

  • Вы должны, вероятно, использовать следующий() вместо эквалайзера, селектора, чтобы сделать ваш код работать с любым количеством детей (или по крайней мере любое число больше 1).

  • Чтобы остановить анимацию при наведении, вам придется вызвать метод Stop() на любые элементы, которые могут быть на полпути в анимацию. Приостановка и продолжение шатер будет использовать чехлы для плагина методов.

  • Вы могли бы рассмотреть с помощью позиции и лучшие атрибуты для позиционирования детей; это именно то, что позицию: абсолютная на.

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

Из-за этого в шатер не цикл, пока всех детей вне родительского див. Чтобы сделать это обертывание рано, я бы посоветовал переписать плагин, чтобы использовать позицию: абсолютная и верхней атрибут на каждого ребенка. Таким образом, каждый ребенок может быть idependently анимированные и шатер может быть петельные раньше.

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

Плагин:

(function($) {

var methods = {
init: function(options) {
this.children(':first').stop();
this.marquee('play');
},
play: function() {
var marquee = this,
pixelsPerSecond = 100,
firstChild = this.children(':first'),
totalHeight = 0,
difference,
duration;

// Find the total height of the children by adding each child's height:
this.children().each(function(index, element) {
totalHeight += $(element).innerHeight();
});

// The distance the divs have to travel to reach -1 * totalHeight:
difference = totalHeight + parseInt(firstChild.css('margin-top'), 10);

// The duration of the animation needed to get the correct speed:
duration = (difference/pixelsPerSecond) * 1000;

// Animate the first child's margin-top to -1 * totalHeight:
firstChild.animate(
{ 'margin-top': -1 * totalHeight },
duration,
'linear',
function() {
// Move the first child back down (below the container):
firstChild.css('margin-top', marquee.innerHeight());
// Restart whole process... :)
marquee.marquee('play');
}
);
},
pause: function() {
this.children(':first').stop();
}
};

$.fn.marquee = function(method) {

// Method calling logic
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.marquee');
}

};

})(jQuery);

Использование:

var marquee = $('#mydiv');

marquee.marquee();

marquee.hover(function() {
marquee.marquee('pause');
}, function() {
marquee.marquee('play');
});

Этот пример может также быть найден на jsfiddle: http://jsfiddle.net/PPvG/LgsrU/

3
ответ дан 27 декабря 2011 в 03:12 Источник Поделиться

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

Даже при 4-х одновременных шатер элементов на странице, реализации практически не влияет на производительность.

enter image description here

Демо можно увидеть на https://dev.anuary.com/60244f3a-b8b2-5678-bce5-f7e8742f0c69/. Код доступен на https://github.com/gajus/marquee.

1
ответ дан 11 января 2013 в 01:01 Источник Поделиться