漂浮广告js代码

自己刚学js试着写了个浮动广告脚本，贴出来给大家喷喷

//给对象添加事件
function addEvent(obj,type,fn){
    if(obj.addEventListener){
        obj.addEventListener(type,fn,false);
    }
    else{
        obj['e'+type+fn]=fn;
        obj[type+fn]=function(){
            obj['e'+type+fn](window.event);
        }
        obj.attachEvent('on'+type,obj[type+fn]);
    }
} 
//获得浏览器的宽和高
function getWindowSize(){
    if(self.innerHeight){
        return {'width':self.innerWidth,'height':self.innerHeight};
    }else if(document.documentElement&&document.documentElement.clientWidth){
        return {'width':document.documentElement.clientWidth,'height':document.documentElement.clientHeight};
    }else if(document.body){
        return {'width':document.body.clientWidth,'height':document.body.clientHeight};
    }
}
 
function Advert(){
	var _this=this;
	var Advertobj=null;
	var Advernav=null;
	var interval=null;
	var _x=0;
	var _y=0;
	var testx=0;
	var testy=0;
	var _step=2;
	var _slope=1;
	
	this.src="";
	this.href="";
	this.top=0;
	this.left=0;
	this.slope=1;
	this.Show=function(){
	    init();
	    start();
	
	};
	function init(){
	    _slope=_this.slope;
	    _x=_this.left;
		_y=_this.top;

	    Advertobj=document.createElement("div");
	    
	    var image=new Image();
	    image.src=_this.src;
	    
	    Advertobj.style.width=image.width+"px";
	    Advertobj.style.height=image.height+"px";
	    Advertobj.style.position="absolute";
		Advertobj.style.top=_y+"px";
		Advertobj.style.left=_x+"px";
	    
	    var tmpleft=image.width-15;
	    Advernav=document.createElement("div");	    
	    Advernav.style.cssText="position:absolute;left:"+tmpleft+"px;width:15px;height:15px;border:solid 1px white;border-top-width:0;border-right-width:0;font-size:15px;font-weight:bold;color:white;cursor:pointer;text-align:center;line-height:15px;";
	    Advernav.innerHTML="X";
	    
	    
	    Advertobj.appendChild(Advernav);
	    Advertobj.appendChild(image);
	    top.document.body.appendChild(Advertobj);
	    
	   // Advernav.attachEvent("onclick",closeAd);
	   // Advertobj.attachEvent("onmouseover",push);
	   // Advertobj.attachEvent("onclick",function(){window.open(_this.href);});
        //Advertobj.attachEvent("onmouseout",start);
        addEvent(Advernav,"click",closeAd);
        addEvent(Advertobj,"mouseover",push);
        addEvent(Advertobj,"click",function(){
                window.open(_this.href);
            });
        addEvent(Advertobj,"mouseout",start);
	   
	}
	function closeAd(){
	    Advertobj.style.display="none";
	}
	function push(){
	    clearTimeout(interval);
	    Advertobj.style.cursor="pointer";
	}
    function start(){
        var windowSize=getWindowSize();
        var W=windowSize.width-Advertobj.offsetWidth;
        var H=windowSize.height-Advertobj.offsetHeight;

        testx=_x+_step;
        testy=_y+_step*_slope;

        if(testx<0||testx>W){
             _step=_step*(-1);
             _slope=_slope*(-1);
        }
        if(testy<0||testy>H){
             _slope=_slope*(-1);
        }
		_x=_x+_step;
        _y=_y+_step*_slope;
		Advertobj.style.left=_x+"px";
        Advertobj.style.top=_y+"px";
        interval=setTimeout(start,30);
    }

}

目前测试在IE11和火狐下都没问题

使用方法：

只需在html页里面嵌入一段js代码如下：

var obj=new Advert();

obj.src="";//图片地址

obj.href="";//点击图片链接地址

//下面这些赋值可选

obj.top=0;

obj.left=0;//图片刚开始位置

obj.slope=1;//图片刚开始移动轨迹的斜率，默认x轴步长为2，delay为30，这些可以在代码中自行修改

obj.Show();//这个必须有