当前位置导航:炫浪网>>网络学院>>网页制作>>JavaScript教程

JS 浮动广告类

/*
*    File: KM.AD.js
*    Description: KaiMo advertisement Class
*    Author: Dnawo
*    Date: 2009-07-22
*
*    e.g.
*
*    var ad = new KM.AD();
*    ad.LeftTop = new KM.ADInfo("<a href='#' target='_blank'><img src='ad.gif?http://www.xvna.com' border='0' /></a>",137,182);
*    ad.RightTop = new KM.ADInfo("<a href='#' target='_blank'><img src='ad.gif?http://www.xvna.com' border='0' /></a>",137,182);
*    ad.LeftMiddle = new KM.ADInfo("<a href='#' target='_blank'><img src='ad.gif?http://www.xvna.com' border='0' /></a>",137,182);
*    ad.RightMiddle = new KM.ADInfo("<a href='#' target='_blank'><img src='ad.gif?http://www.xvna.com' border='0' /></a>",137,182);
*    ad.LeftBottom = new KM.ADInfo("<a href='#' target='_blank'><img src='ad.gif?http://www.xvna.com' border='0' /></a>",137,182);
*    ad.RightBottom = new KM.ADInfo("<a href='#' target='_blank'><img src='ad.gif?http://www.xvna.com' border='0' /></a>",137,182);
*    ad.Start();
*/
(function(){
         
    //Namespace
    if(!window.KM)window.KM={};
    if(typeof window.KM != "object")throw new Error("'window.KM' is not an object!");
   
    //Model Class
    KM.ADInfo = function(html,width,height)
    {
        this.Html = html || "";
        this.Width = typeof width == "number" ? width : 0;
        this.Height = typeof height == "number" ? height : 0;
    }
    KM.ADInfo.PRototype.toString = function(){
        return "Html:" + this.Html + "\r\n" +
                "Width:" + this.Width + "\r\n" +
                "Height:" + this.Height + "\r\n";
    };
   
    //AD Class
    KM.AD = function()
    {
        /*private members*/
       
        //delay time, (milliseconds)
        var _delay = 50;
        //object initialize
        var _initialize = function(html,width,height){
            var div = document.createElement("div");
            div.id = "km_" + (new Date()).getTime();
            div.style.position = "absolute";
            div.style.backgroundColor = "#FFFFFF";
            div.style.overflow = "hidden";
            div.style.top = "0px";
            div.style.left = "0px";
            div.style.width = width + "px";
            div.style.height = height + "px";
            div.innerHTML = html;
            try{document.getElementsByTagName("body").item(0).appendChild(div)}catch(ex){};
                   
            return div;
        }
        //delete the unit
        var _deleteUnit = function(text){ return Math.round(("" + text).replace(/(px)$/g,""));};
        //
        var _me = this;
       
        /*public members*/
       
        this.Version = "1.0";
        this.Html = "";
        this.Width = 0;
        this.Height = 0;
       
        this.LeftTop = {}; //type of ADInfo
        this.RightTop = {}; //type of ADInfo
        this.LeftMiddle = {}; //type of ADInfo
        this.RightMiddle = {}; //type of ADInfo
        this.LeftBottom = {}; //type of ADInfo
        this.RightBottom = {}; //type of ADInfo

        this.Start = function(){
            if(this.LeftTop instanceof KM.ADInfo && !this.LeftTop.Element)
                this.LeftTop.Element = _initialize(this.LeftTop.Html,this.LeftTop.Width,this.LeftTop.Height);
            if(this.RightTop instanceof KM.ADInfo && !this.RightTop.Element)
                this.RightTop.Element = _initialize(this.RightTop.Html,this.RightTop.Width,this.RightTop.Height);
            if(this.LeftMiddle instanceof KM.ADInfo && !this.LeftMiddle.Element)
                this.LeftMiddle.Element = _initialize(this.LeftMiddle.Html,this.LeftMiddle.Width,this.LeftMiddle.Height);
            if(this.RightMiddle instanceof KM.ADInfo && !this.RightMiddle.Element)
                this.RightMiddle.Element = _initialize(this.RightMiddle.Html,this.RightMiddle.Width,this.RightMiddle.Height);
            if(this.LeftBottom instanceof KM.ADInfo && !this.LeftBottom.Element)
                this.LeftBottom.Element = _initialize(this.LeftBottom.Html,this.LeftBottom.Width,this.LeftBottom.Height);
            if(this.RightBottom instanceof KM.ADInfo && !this.RightBottom.Element)
                this.RightBottom.Element = _initialize(this.RightBottom.Html,this.RightBottom.Width,this.RightBottom.Height);
               
            var clientWidth = document.documentElement.clientWidth;
            var clientHeight = document.documentElement.clientHeight;
            var scrollTop = document.documentElement.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft;
           
            if(this.LeftTop.Element){
                this.LeftTop.Element.style.top = _deleteUnit(scrollTop) + "px";
                this.LeftTop.Element.style.left = _deleteUnit(scrollLeft) + "px";
            }
            if(this.RightTop.Element){
                this.RightTop.Element.style.top = _deleteUnit(scrollTop) + "px";
                this.RightTop.Element.style.left = _deleteUnit(scrollLeft) + _deleteUnit(clientWidth) - _deleteUnit(this.RightTop.Element.style.width) - 2 + "px";
            }
            if(this.LeftMiddle.Element){
                this.LeftMiddle.Element.style.top = _deleteUnit(scrollTop) + _deleteUnit(clientHeight)/2 - _deleteUnit(this.LeftMiddle.Element.style.height)/2 + "px";
                this.LeftMiddle.Element.style.left = _deleteUnit(scrollLeft) + "px";
            }
            if(this.RightMiddle.Element){
                this.RightMiddle.Element.style.top = _deleteUnit(scrollTop) + _deleteUnit(clientHeight)/2 - _deleteUnit(this.RightMiddle.Element.style.height)/2 + "px";
                this.RightMiddle.Element.style.left = _deleteUnit(scrollLeft) + _deleteUnit(clientWidth) - _deleteUnit(this.RightMiddle.Element.style.width) - 2 + "px";
            }
            if(this.LeftBottom.Element){
                this.LeftBottom.Element.style.top = _deleteUnit(scrollTop) + _deleteUnit(clientHeight) - _deleteUnit(this.LeftBottom.Element.style.height) - 2 + "px";
                this.LeftBottom.Element.style.left = _deleteUnit(scrollLeft) + "px";
            }
            if(this.RightBottom.Element){
                this.RightBottom.Element.style.top = _deleteUnit(scrollTop) + _deleteUnit(clientHeight) - _deleteUnit(this.RightBottom.Element.style.height) - 2 + "px";
                this.RightBottom.Element.style.left = _deleteUnit(scrollLeft) + _deleteUnit(clientWidth) - _deleteUnit(this.RightBottom.Element.style.width) - 2 + "px";
            }
           
            setTimeout(function(){_me.Start();},_delay);
        };
       
        this.Clear = function(){
            if(this.LeftTop.Element)this.LeftTop.Element.parentNode.removeChild(this.LeftTop.Element);
            if(this.RightTop.Element)this.RightTop.Element.parentNode.removeChild(this.RightTop.Element);
            if(this.LeftMiddle.Element)this.LeftMiddle.Element.parentNode.removeChild(this.LeftMiddle.Element);
            if(this.RightMiddle.Element)this.RightMiddle.Element.parentNode.removeChild(this.RightMiddle.Element);
            if(this.LeftBottom.Element)this.LeftBottom.Element.parentNode.removeChild(this.LeftBottom.Element);
            if(this.RightBottom.Element)this.RightBottom.Element.parentNode.removeChild(this.RightBottom.Element);
        };       
    };
})();

 

暂时只支持左上、右上、左中、右中、左下、右下六个位置,通过组合可做成对联广告。

IE(6.0)、FF(2.0)、Opera(9.6)测试通过。

相关内容
赞助商链接