jquery间谍向左移动



如何修改jquery spy脚本使其水平移动?(现在它在垂直移动)。

我认为必须在代码的这一部分进行修改:

  (function ($) {
    $.fn.reverseOrder = function() {
        return this.each(function() {
            $(this).prependTo( $(this).parent() );
        });
    };

    $.fn.simpleSpy = function (limit, interval) {
        limit = limit || 4;
        interval = interval || 4000;
        return this.each(function () {

1.设置捕获所有有趣标题的缓存精简列表以限制li元素

  var $list = $(this),
                items = [], // uninitialised
                currentItem = limit,
                total = 0, // initialise later on
                start = 0,//when the effect first starts
                startdelay = 4000;
                width = $list.find('> li:first').width();
            // capture the cache
            $list.find('> li').each(function () {
                items.push('<li>' + $(this).html() + '</li>');
            });
            total = items.length;
            $list.wrap('<div class="spyWrapper" />').parent().css({ width : width * limit });
            $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
    // 2. effect 

        function spy() {
            // insert a new item with opacity and width of zero
            var $insert = $(items[currentItem]).css({
                width : 0,
                opacity : 0,
                display : 'none'
            }).prependTo($list);
            // fade the LAST item out
            $list.find('> li:last').animate({ opacity : 0}, 600, function () {
                // increase the width of the NEW first item
                 $insert.animate({ width : width }, 600).animate({ opacity : 1 }, 1000);
                // AND at the same time - decrease the width of the LAST item
                // $(this).animate({ width : 0 }, 1000, function () {
                    // finally fade the first item in (and we can remove the last)
                    $(this).remove();
                // });
            });

        currentItem++;
        if (currentItem >= total) {
            currentItem = 0;
        }
        setTimeout(spy, interval)
    }
    if (start < 1) {
           setTimeout(spy,startdelay);
            start++;
        } else {
        spy();
        }
});

示例:http://dart-foto.ru/index_p.php

http://jqueryfordesigners.com/simple-jquery-spy-effect/

我会使用CSS来浮动列表项。。。那就行了。

li { float: left; }

相关内容

  • 没有找到相关文章

最新更新