论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

编写ImagesLazyLoad 图片延迟加载效果代码

文章类别：Javascript | 发表日期:2010-3-27 12:17:17

21视频教程网3月27日整理


adbox.jpg (48.18 KB)

2010-3-11 22:14

 

 

 



演示地址：Flash视频广告、 图片广告、图文消息提示（广告）
打包下载： yadbox.rar (67.48 KB)



我网站首页演示的效果是弹出视频广告，不过我这个视频是一个JAVASCRIPT教程，所以没有设置自动关闭。好了，简单介绍一下广告代码的特点：

1. 支持弹出图片、FLASH、FLV的视频广告
2. 页面加载完后5秒钟弹出（虽然广告总是比较讨厌），这样用户对用户稍微好点。
3. 可以设置广告显示的自动关闭时间（图片和FLASH的默认显示时间为10秒）
4. 可以设置广告位: RIGHT - 右下角、CENTER - 浏览器可视区域(viewport)正中间、LEFT - 左下角
5. 可以设置是否滚动显示广告，默认滚动显示

调用十分方便：

加载图片广告

代码:
YAO.adBox.img({
   src: 'http://www.yaohaixiao.com/img/ad.jpg',  // 图片路径 - 必填
   href: 'http://www.yaohaixiao.com/',  // 广告的链接地址 - 必填
   title: '我的图片广告',  // 广告窗口的标题 - 可选
   position: 'CENTER', //  广告窗口的位置 - 可选
   showtime: 15  // 广告的显示时间 - 可选 （目前我做的处理是图片和flash的广告一定会自动关闭，视频广告可以设置显示时间也可以一直显示）
})

加载FLASH广告

代码:
YAO.adBox.swf({
   src: 'http://www.yaohaixiao.com/swf/ad.swf',  // flash路径 - 必填
   title: '我的图片广告',  // 广告窗口的标题 - 可选
   position: 'CENTER', //  广告窗口的位置 - 可选
   showtime: 15  // 1 - 1秒 - 可选
})

加载FLV视频广告

代码:
YAO.adBox.flv({
   playlist: 'http://www.yaohaixiao.com/swf/ad.flv',  // 视频路径 - 必填 （JS FLVPLAYER同时也支持加载XML格式的视频列表）
   title: '我的图片广告',  // 广告窗口的标题 - 可选
   position: 'CENTER', //  广告窗口的位置 - 可选
   showtime: 15  // 1 - 1秒 - 可选 （不写就代表一是显示广告，广告需要用户自己关闭。比如我的JS教学视频，我想这样的视频就可以一直显示）
})

加载图文信息（广告）

代码:
YAO.adBox.msg({
    text: '一个很经典的标签导航效果，点击标签新闻滚动，可以设置自动滚动或手动滚动。ytabs.js中的moveElement方法来处理滚动效果。 ytabs.js中还包含了YAO和tabView两个类，YAO是我根据YUI还有一些其他资源整理的一个常用方法类...', // 必填
    href: 'http://www.yaohaixiao.com/javascript/', // 必填
    title: 'YTabs！多标签自动横向滚动新闻导航', // 可选
    src: 'http://www.yaohaixiao.com/scripts/ytabs-scroll-ajaxtabs/img/h-1.jpg' // 可选
});

好了，看看核心代码(程序需要调用我自己写的一个小库yao.js，FLASH和视频需要动态加载swfobject.js，播放视频需要加载开源的FLV播放器JW FLVPlayer)：

代码:// 2010-3-25 更新
YAO.adBox = function(){
    var Y = YAO,
    D = window.document,
    body = D.body,
    head = D.getElementsByTagName('head')[0],
    IE6 = Y.userAgent.ie === 6 ? true : false,
    HOST = 'http://www.yaohaixiao.com/',
    SWFJS_PATH = HOST + 'js/swfobject.js',
    LATER_TIME = 5000,
    FLASH_VER = '8',
    WIDTH = 326,
    HEIGHT = 276,
    CONTENT_WIDTH = 320,
    CONTENT_HEIGHT = 240,
    SCROLL_SPEED = 50,
    COMPONENTS = {
        WINDOW: 'y-adwindow',
        TITLEBAR: 'y-adtitlebar',
        TITLE: 'y-adtitle',
        CLOSEBTN: 'y-adclosebar',
        CLOSEBTN_TIP: '关闭窗口',
        CONTENT: 'y-adcontent',
        IMAGE: 'y-adimage',
        LINK: 'y-adlink',
        FLASH: 'adflash',
        VIDEO: 'advideo',
        MESSAGE: 'y-admessage',
        MSG_INFO: 'y-admsg-info',
        MSG_VIEW: 'y-admsg-view',
        MSG_VIEW_TIP: '查看详情',
        MSG_IMG: 'y-admsg-image'
    },
    
    position = 'RIGHT',
    showTime = 10,
    isDisplay = false,
    isScroll = true,
   
    adWindow = null,
    title = 'YAO Popup Advertisement Box',
    closeBtn = null,
    content = null,
    imgAd = {
        link: null,
        img: null,
        href: '',
        src: ''
    },
    swfAd = {
        flash: null,
        src: ''
    },
    flvAd = {
        player: null,
        SRC: HOST + 'swf/flvplayer.swf',
        playlist: ''
    },
    msgAd = {
        message: null,
        title: '',
        href: '',
        text: '',
        img: null,
        src: ''
    },
    createAdBox = function(){
        // 创建关闭按钮
        closeBtn = Y.Builder.node('a', {
            id: COMPONENTS.CLOSEBTN,
            href: "#closeAd",
            tilte: COMPONENTS.CLOSEBTN_TIP
        }, COMPONENTS.CLOSEBTN_TIP);
        
        // 创建广告内容容器
        content = Y.Builder.node('div', {
            id: COMPONENTS.CONTENT
        });
        
        adWindow = Y.Builder.node('div', {
            id: COMPONENTS.WINDOW
        }, [Y.Builder.node('div', {
            id: COMPONENTS.TITLEBAR
        }, [Y.Builder.node('h2', {
            id: COMPONENTS.TITLE
        }, title), closeBtn]), content]);
        Y.setStyle(adWindow, 'display', 'none');
        body.appendChild(adWindow);
        
        // 判断将什么内容添加到内容容器中
        if (imgAd.link) {
            content.appendChild(imgAd.link);
        }
        else {
            if (msgAd.message) {
                content.appendChild(msgAd.message);
            }
        }
    };
    
    return {        
        img: function(config){
            if (!config.src || !config.href) {
                return false;
            }
            
            var that = this;
            
            imgAd.src = config.src;
            imgAd.href = config.href;    
            if (config.position && Y.isString(config.position)) {
                position = config.position.toUpperCase();
            }
            if (config.title) {
                title = config.title;
            }
            if(config.showtime && Y.isNumber(config.showtime) && config.showtime >= 1){
                showTime = config.showtime;
            }
            if(Y.isBoolean(config.scroll) && !config.scroll){
                isScroll = false;
            }
            
            imgAd.img = Y.Builder.node('img', {
                id: COMPONENTS.IMAGE,
                src: imgAd.src,
                alt: title
            });
            imgAd.link = Y.Builder.node('a', {
                id: COMPONENTS.LINK,
                title: title,
                href: imgAd.href
            }, imgAd.img);
            
            if (imgAd.img.complete) {
                this.show();
            }
            else {
                Y.on(imgAd.img, 'load', function(){
                    that.show.call(that);
                });
            }
        },
        swf: function(config){
            if (!config.src) {
                return false;
            }
            
            var that = this, callback = function(){
                that.show();
                swfAd.flash = new SWFObject(swfAd.src, COMPONENTS.FLASH, CONTENT_WIDTH, CONTENT_HEIGHT, FLASH_VER);
                swfAd.flash.addParam('wmode', 'transparent');
                swfAd.flash.write(COMPONENTS.CONTENT);
            };
            
            swfAd.src = config.src;
            if (config.position && Y.isString(config.position)) {
                position = config.position.toUpperCase();
            }
            if (config.title) {
                title = config.title;
            }
            if(config.showtime && Y.isNumber(config.showtime) && config.showtime >= 1){
                showTime = config.showtime;
            }
            if(Y.isBoolean(config.scroll) && !config.scroll){
                isScroll = false;
            }
            
            Y.loadScript(SWFJS_PATH, callback);
        },
        flv: function(config){
            if (!config.playlist) {
                return false;
            }
            
            var that = this, callback = function(){
                that.show();
                
                flvAd.flvPlayer = new SWFObject(flvAd.SRC, COMPONENTS.VIDEO, CONTENT_WIDTH, CONTENT_HEIGHT, FLASH_VER);
                flvAd.flvPlayer.addParam('wmode', 'transparent');
                flvAd.flvPlayer.addParam('allowfullscreen', 'true');
                flvAd.flvPlayer.addParam('allowscriptaccess', 'always');
                flvAd.flvPlayer.addVariable('width', CONTENT_WIDTH);
                flvAd.flvPlayer.addVariable('height', CONTENT_HEIGHT);
                flvAd.flvPlayer.addVariable('file', flvAd.playlist);
                flvAd.flvPlayer.addVariable('autostart', 'true');
                flvAd.flvPlayer.addVariable('overstretch', 'fit');
                flvAd.flvPlayer.addVariable("usefullscreen", "true");
                flvAd.flvPlayer.addVariable('showstop', 'true');
                flvAd.flvPlayer.addVariable('showdownload', 'true');
                flvAd.flvPlayer.addVariable('screencolor', '0x000000');
                flvAd.flvPlayer.addVariable('backcolor', '0xCCCC66');
                flvAd.flvPlayer.addVariable('frontcolor ', '0xFFFFFF');
                flvAd.flvPlayer.addVariable('lightcolor', '0x000000');
                flvAd.flvPlayer.addVariable('autoscroll', 'true');
                flvAd.flvPlayer.addVariable('shuffle', 'false');
                flvAd.flvPlayer.addVariable("enablejs", "true");
                flvAd.flvPlayer.addVariable("javascriptid", "jsflvplayer");
                flvAd.flvPlayer.write(COMPONENTS.CONTENT);
            };
            
            flvAd.playlist = config.playlist;
            if (config.position && Y.isString(config.position)) {
                position = config.position.toUpperCase();
            }
            if (config.title) {
                title = config.title;
            }
            showTime = config.showtime || 0;
            if(Y.isBoolean(config.scroll) && !config.scroll){
                isScroll = false;
            }
            
            Y.loadScript(SWFJS_PATH, callback);
        },
        msg: function(config){
            if (!config.href || !config.text) {
                return false;
            }
            
            var that = this,
            msgInfo = Y.Builder.node('p', {
                id: COMPONENTS.MSG_INFO
            }),
            msgContent = D.createDocumentFragment();
            
            msgAd.href = config.href;
            msgAd.text = config.text;
            if(config.src){
                msgAd.src = config.src;
            }
            if (config.position && Y.isString(config.position)) {
                position = config.position.toUpperCase();
            }
            if (config.title) {
                title = config.title;
            }
            showTime = config.showtime || 0;    
            if(Y.isBoolean(config.scroll) && !config.scroll){
                isScroll = false;
            }        
            
            if (msgAd.src) {
                msgAd.img = Y.Builder.node('a', {
                    href: msgAd.href,
                    title: title
                }, Y.Builder.node('img', {
                    id: COMPONENTS.MSG_IMG,
                    alt: title,
                    src: msgAd.src
                }));
                msgContent.appendChild(msgAd.img);
            }
            msgContent.appendChild(Y.Builder.text(msgAd.text));
            msgInfo.appendChild(msgContent);
            
            msgAd.message = Y.Builder.node('div', {
                id: COMPONENTS.MESSAGE
            }, [msgInfo, Y.Builder.node('p', {
                id: COMPONENTS.MSG_VIEW
            }, Y.Builder.node('a', {
                href: msgAd.href
            }, COMPONENTS.MSG_VIEW_TIP))]);
            
            this.show();
        },    
        show: function(){
            if (!isDisplay) {
                var that = this;
                createAdBox();
                Y.fixPosition(adWindow, position, WIDTH, HEIGHT, isScroll);
                Y.on(closeBtn, 'click', function(event){
                    var evt = event || window.event;
                    that.close.call(that);
                    Y.stopEvent(evt);
                });
                
                Y.on(window, 'resize', function(){
                    Y.fixPosition(adWindow, position, WIDTH, HEIGHT, false);
                });
                    
                if (IE6) {
                    Y.on(window, 'scroll', function(){
                        Y.fixPosition(adWindow, position, WIDTH, HEIGHT, false);
                    });
                }
                
                setTimeout(function(){
                    var left = 0, top = 0;
                    
                    Y.setStyle(adWindow, 'display', 'block');
                    isDisplay = true;            
                    left = parseInt(Y.getStyle(adWindow, 'left'), 10);
                    top = parseInt(Y.getStyle(adWindow, 'top'), 10) - HEIGHT;    
                    if (isScroll && position !== 'CENTER') {
                        Y.moveElement(adWindow, left, top, SCROLL_SPEED);
                    }
                    
                    if (imgAd.img || swfAd.flash || (flvAd.player && showTime) || (msgAd.message && showTime)) {
                        if (isScroll && position !== 'CENTER') {
                            setTimeout(function(){
                                Y.moveElement(adWindow, left, top + HEIGHT, SCROLL_SPEED, function(){
                                    that.close.call(that);
                                });
                            }, showTime * 1000);
                        }
                        else {
                            setTimeout(function(){
                                that.close.call(that);
                            }, showTime * 1000);
                        }
                    }
                    
                }, LATER_TIME);
            }
        },
        close: function(){
            if (isDisplay) {
                Y.purge(closeBtn);
                body.removeChild(adWindow);
                isDisplay = false;
            }
        }
    };
}();

广告窗口的CSS代码

代码:
/* 广告窗口 */
#y-adwindow{
    position:absolute;
    z-index:999;
    width:320px;
    height:270px;
    overflow:hidden;
    background-color:#FFF;
    border:3px solid #B0BEC7;
}
/* 广告标题栏 */
#y-adtitlebar{
    position:relative;
    z-index:1000;
    margin:0 auto;
    width:100%;
    height:27px;
    line-height:27px;
    background-color:#EAEFF5;
    border-bottom:3px solid #B0BEC7;
    overflow:hidden;
}
/* 广告标题文字 */
#y-adtitlebar h2{
    margin:0 auto;
    width:100%;
    height:27px;
    line-height:27px;
    text-indent:6px;
    text-align:left;
    font-size:12px;
    color:#369;
}
#y-adtitlebar a:link,
#y-adtitlebar a:visited,
#y-adtitlebar a:hover{
    position:absolute;
    z-index:1001;
    top:6px;
    right:6px;
    width:15px;
    height:15px;
    color:#369;
    background:transparent url(../img/tool-sprites.gif) 0 0 no-repeat;
    text-indent:-999px;
    text-decoration:none;
    overflow:hidden;
}
#y-adtitlebar a:hover{
    background:transparent url(../img/tool-sprites.gif) -15px 0 no-repeat;
}
#y-adcontent{
    margin:0 auto;
    overflow:hidden;
    background-color:#EAEFF5;
}
#y-adcontent,
#y-adcontent img,
#y-admessage{
    width:100%;
    height:240px;
}
#y-admessage p{
    margin:0 auto;
    overflow:hidden;
    padding:0;
}
#y-admessage p#y-admsg-info{
    width:94%;
    text-indent:24px;
    font-size:12px;
    line-height:150%;
    margin-top:10px;
    margin-bottom:10px;
    height:180px;
    overflow:auto;
}
#y-admessage p#y-admsg-info img{
    float:left;
    width:130px;
    height:174px;
    margin-right:10px;
    padding:2px;
    border:1px solid #B0BEC7;
}
#y-admessage p#y-admsg-view{
    text-align:right;
    width:96%;
    height:39px;
    line-height:38px;
    overflow:hidden;
    border-top:1px solid #B0BEC7;
}
#y-admessage p#y-admsg-view a{
    color:#369;
}
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058