完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效

2020-05-23 06:10:24易采站长站整理

            /*获得所有列表项目的缓存*/
            items = [],
            /*未初始化*/
            currentItem = limit,
            total = 0,
            /*初始化以后*/
            height = $list.find(‘> li:first’).height();
            /*列表限制li元素*/
            $list.find(‘> li’).each(function(){
            /*获得缓存*/
                items.push(‘<li>’ + $(this).html() + ‘</li>’);
                /*获得所有列表的li里面的缓存*/
            });
            total = items.length;
            /*始终显示在缓存里的li*/
            $list.wrap(‘<div class=”spyWrapper” />’).parent().css({height : height * limit});
            /*控制div在图片消失的时候依然保持同样的高度不会因为div的消失而变化*/
            $list.find(‘> li’).filter(‘:gt(‘ + (limit – 1) + ‘)’).remove();
            /*通过调用遍历方法获得所有li元素在实现移除的方法*/
            function spy(){
            /*开始第二个图片从最上方插入的效果*/
                var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : ‘none’}).prependTo($list);
                /*插入一个新的div,透明度和高度为零*/
                $list.find(‘> li:last’).animate({ opacity : 0}, 1000, function(){
                /*通过遍历插入一个动画出现的效果 时间为1秒*/