http://www.163ns.com/zixun/post/5232.html   打开这个网站鼠标 滑轮往下,这种文字渐现的效果怎么实现?JavaScript特效

解决方案 »

  1.   

    http://www.cnblogs.com/liping13599168/archive/2010/05/16/1736620.html
      

  2.   

    数据延迟加载
    /*
    * 数据延迟加载jQuery插件
    * Copyright: Leepy
    * Update: 2010-05-15
    * Home:   http://www.cnblogs.com/liping13599168/
    */(function($) {
        //包装延迟加载容器
        $.fn.wraplazyload = function(value) {
            this.html('<textarea class="text-lazyload">' + value + '</textarea>');
        };    //开始进行延迟加载
        $.fn.datalazyload = function(options) {
            var settings = {
                dataContainer: '.text-lazyload',
                dataItem: '.item-lazyload',
                loadType: 'p',                   //可以为item(条目加载),img(图片加载)
                container: window,
                event: 'scroll',
                effect: 'normal',                   //效果类型
                effectTime: 1000,                   //效果持续时间
                position: 'vertical'                //可以为vertical(垂直加载),horizontal(水平加载)
            };        if (options) {
                $.extend(settings, options);
            }        var dataContainer = this.find(settings.dataContainer);
            if (dataContainer.length == 0) {
                alert('请先包装延迟加载的容器.');
            }        dataContainer.each(
                function() {
                    var content = $('<div>' + $(this).val().replace(/src=/gi, 'dynamic=') + '</div>');
                    $(this).after(content);                var element = settings.loadType == 'p' ? content.find(settings.dataItem) : (settings.loadType == 'image' ? content.find('img') : null);
                    element.each(function() { $(this).css('visibility', 'hidden'); }); //为了兼容非IE浏览器对visibilty的识别
                    if (element == null) {
                        alert('未引用对象实例.');
                        return;
                    }                $(settings.container).bind(settings.event, function(event) {                    var pixel = 0;
                        if (settings.position == 'vertical') {
                            pixel = $(settings.container).height() + $(settings.container).scrollTop();
                        }
                        else if (settings.position == 'horizontal') {
                            pixel = $(settings.container).width() + $(settings.container).scrollLeft();
                        }                    element.each(function() {
                            if ($(this).css('visibility') != 'visible' &&
                                (settings.position == 'vertical' && pixel >= $(this).offset().top
                                    || settings.position == 'horizontal' && pixel >= $(this).offset().left)) {                            $(this).css('visibility', 'visible');                            if (settings.effect == 'fadeIn') {
                                    $(this).hide();
                                    $(this)[settings.effect](settings.effectTime);
                                }
                                
                                if (settings.loadType == 'p')
                                    $(this).html($(this).html().replace(/dynamic=/gi, 'src='));
                                else if (settings.loadType == 'image')
                                    $(this).attr('src', $(this).attr('dynamic')).removeAttr('dynamic');
                            }
                        });
                    });
                    //初次加载数据触发事件
                    $(settings.container).trigger(settings.event);
                }
            );
            dataContainer.remove();
        };})(jQuery);  js 是这些
      

  3.   

    jquery lazy