Kad -- 自己写的JS浮动广告代码封装器支持FF/IE

最新推荐文章于 2024-08-20 08:51:13 发布

许一沐

最新推荐文章于 2024-08-20 08:51:13 发布

阅读量215

点赞数

分类专栏： IE prototype

本文链接：https://blog.csdn.net/vb2005xu/article/details/52539063

版权

IE 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

prototype

11 篇文章 0 订阅

订阅专栏

不依赖其他的代码库,仅仅一个js文件,代码尚不完善,支持FF,问题颇多,用到共用变量致使不能new多个实例对象

代码改进中...

Kad = function(){
} ;
Kad.prototype.meta = {
	author:　"vb2005xu | http://vb2005xu.iteye.com"　,
	version:　"0.1",
	date: "2009-8-30 19:34:12" ,
	description: 'Kad 是自定义的 页面广告的封装器'
} ;

/**
 * 漂浮广告
 */
Kad.FloatAD = function(){
	this.template = '<div id="@{id}" style="position:absolute;display:none;z-index: 100; top: 0; left: 0;">' +
		'<a href="@{target-url}" target="_blank">' +
		'<img src="@{img-url}" border="0" width="@{width}" height="@{height}"/>' +
		'</a></div>';
};

Kad.FloatAD.prototype = {
	id: + new Date() ,
	target: 'http://localhost'　,
	img: {
		url: '',width: '',height: ''
	},
//	
	set: function(id,target,img_url,w,h){
		this.id = id ;
		this.target = target;		
		this.img.src = img_url ;
		this.img.width = w ;
		this.img.height = h ;
		
	} ,
	compile: function(){
		this.template = this.template.replace(/@{id}/g,this.id)
			.replace(/@{target-url}/g,this.target).replace(/@{img-url}/g,this.img.src)
			.replace(/@{width}/g,this.img.width).replace(/@{height}/g,this.img.height) ;
	} ,
//	
	init: function(){
		this.compile();
		//将div追加到body后面
		var body = document.getElementsByTagName('body')[0] ;
		body.innerHTML = this.template + body.innerHTML;
	} , 
	start: function(){
		this.init();
		this.run();
	}
	,	
	run: function(){
		var floatImg = document.getElementById(this.id);
		floatImg.style.display = '' ;
	    var delay = 10; //控制每次执行间隔的时间，做越大移动得越慢；
	    var speed = 1; //控制每次执行移动的距离，值越大移动得越快；
	    var flagX = 0;
	    var flagY = 0;
	    
	    flowImg = function () {
	    	
	    	function toPixel(str1) {
		    //该函数用于去掉数值后面的px，并将之转化为数字。
		        var oldLen = str1.length;
		        var newLen = oldLen - 2;
		        
		        str2 = str1.slice(0, newLen);
		        str3 = parseInt(str2);
		        
		        return str3;
		    }
	    	
//	        var bWidth = document.body.clientWidth;
//	        var bHeight = document.body.clientHeight;
//	        var bLeft = document.body.scrollLeft;
//	        var bTop = document.body.scrollTop;
	        var bWidth = document.documentElement.clientWidth;
	        var bHeight = document.documentElement.clientHeight;
	        var bLeft = document.documentElement.scrollLeft;
	        var bTop = document.documentElement.scrollTop;
	        
	        var iWidth = floatImg.offsetWidth;
	        var iHeight = floatImg.offsetHeight;
	        var iLeft = toPixel(floatImg.style.left);
	        var iTop = toPixel(floatImg.style.top);
	        
	        //下面一段控制横向移动
	        if(iLeft < (bWidth - iWidth) && flagX == 0) {
	            floatImg.style.left = (iLeft + speed) + "px";
	        }
	        else if(iLeft >= (bWidth - iWidth) && flagX ==0) {
	            flagX = 1;
	        }
	        else if(iLeft > 0 && flagX == 1) {
	            floatImg.style.left = (iLeft - speed) + "px";
	        }
	        else if(0 >= iLeft && flagX == 1) {
	            flagX = 0;
	        }
	        
	        //下面一段控制纵向移动
	        if(iTop < (bHeight - iHeight) && flagY == 0) {
	            floatImg.style.top = (iTop + speed) + "px";
	        }
	        else if(iTop >= (bHeight - iHeight) && flagY ==0) {
	            flagY = 1;
	        }
	        else if(iTop > 0 && flagY == 1) {
	            floatImg.style.top = (iTop - speed) + "px";
	        }
	        else if(0 >= iTop && flagY == 1) {
	            flagY = 0;
	        }
	    }
	    
	    var imgInterval = setInterval("flowImg()", delay);
	    floatImg.onmouseover = function() {clearInterval(imgInterval);}
	    floatImg.onmouseout = function() {imgInterval = setInterval("flowImg()", delay);}
		
	} 
} ;

附件中包括完整代码和实例....

问题: 尚不能很清晰的清楚了解js对象作用域...