JS 特效, 这个怎么实现? 100结贴

t101lian 2013-07-19 02:12:10
http://www.163ns.com/zixun/post/5232.html 打开这个网站鼠标 滑轮往下,这种文字渐现的效果怎么实现?
...全文
229 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
yaozhongping 2013-07-19
  • 打赏
  • 举报
回复
懒加载而已,很简单。
tony4geek 2013-07-19
  • 打赏
  • 举报
回复
tony4geek 2013-07-19
  • 打赏
  • 举报
回复
数据延迟加载
/*
* 数据延迟加载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 是这些

87,991

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧