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 = function(){};Kad.prototype.meta = {author: "vb2005xu | http://vb2005xu.javaeye.com" ,version: "0.1",date: "2009-8-30 19:34:12" ,description: 'Kad 是自定义的 页面广告的封装器'};/** * 漂浮广告 */Kad.FloatAD = function(){this.divWrapper = document.createElement('div');this.divWrapper.style['position'] = 'absolute';this.divWrapper.style['display'] = 'none';this.divWrapper.style['zIndex'] = '100';this.divWrapper.style['left'] = '0px';this.divWrapper.style['top'] = '0px';this.template = '<div style="position:absolute;z-index: 101">' +'<a href="@{target-url}" target="_blank">' +'<img src="@{img-url}" border="0" width="@{width}" height="@{height}"/>' +'</a>' +'</div>' +'<iframe style="position:absolute;width:100%;height:100%;background:#fff;border:0;z-index: 100"></iframe>' +'<div style="position:absolute;z-index: 100"></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(/@{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();this.divWrapper.id = this.id;this.divWrapper.style['width'] = this.img.width + 'px';this.divWrapper.style['height'] = this.img.height + 'px';this.divWrapper.innerHTML = this.template;//将div追加到body后面var body = document.getElementsByTagName('body')[0];body.appendChild(this.divWrapper);} , start: function(){this.init();this.run();},run: function(){this.divWrapper.style['display'] = ''; var delay = 10; //控制每次执行间隔的时间，做越大移动得越慢； var speed = 1; //控制每次执行移动的距离，值越大移动得越快； var flagX = 0; var flagY = 0; var divWrapper = this.divWrapper; flowImg = function () { function toPixel(str1) { //该函数用于去掉数值后面的px，并将之转化为数字。 var oldLen = str1.length; var newLen = oldLen - 2; str2 = str1.slice(0, newLen); str3 = parseInt(str2); return str3; } // ie 7/8 firefox 上可以 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 = divWrapper.offsetWidth; var iHeight = divWrapper.offsetHeight; var iLeft = toPixel(divWrapper.style.left); var iTop = toPixel(divWrapper.style.top); //下面一段控制横向移动 if(iLeft < (bWidth - iWidth) && flagX == 0) { divWrapper.style.left = (iLeft + speed) + "px"; } else if(iLeft >= (bWidth - iWidth) && flagX ==0) { flagX = 1; } else if(iLeft > 0 && flagX == 1) { divWrapper.style.left = (iLeft - speed) + "px"; } else if(0 >= iLeft && flagX == 1) { flagX = 0; } //下面一段控制纵向移动 if(iTop < (bHeight - iHeight) && flagY == 0) { divWrapper.style.top = (iTop + speed) + "px"; } else if(iTop >= (bHeight - iHeight) && flagY ==0) { flagY = 1; } else if(iTop > 0 && flagY == 1) { divWrapper.style.top = (iTop - speed) + "px"; } else if(0 >= iTop && flagY == 1) { flagY = 0; } } var imgInterval = setInterval("flowImg()", delay); this.divWrapper.onmouseover = function() {clearInterval(imgInterval);} this.divWrapper.onmouseout = function() {imgInterval = setInterval("flowImg()", delay);}} };