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

不依赖其他的代码库,仅仅一个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对象作用域...

 

Kad.rar (12.7 KB)

下载次数: 87