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对象作用域...

 

评论

2 楼 vb2005xu 2011-06-01  

新版

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);}
		
	} 
};

1 楼 vb2005xu 2011-06-01  

引用

让Flash乖乖躲到Div浮动层下去
发表于1187 天前 ⁄ 工作学习 ⁄ 暂无评论

今天正打算把刚做完的一个网站提交给客户时突然发现网站首页中因为放了好多Flash，结果把几个浮动的都挡住了。

第一想到的当然是把浮动层的z-index调高，但似乎z-index对Flash不起作用。

又想到：把Flash设为透明呢？一试之下果然好用：只要在Flash对象加入页面时生成的HTML代码中加入以下参数就可以让Div浮动层从Flash下露出来了：<param name=”wmode” value=”transparent” />

另外，放狗搜了一下，发现另外一个更专业的参数：<param name=”wmode” value=”opaque” />

transparent是负责透明的，显出浮动只不过是他的一个副业而已；而opaque才是专门负责让Flash位于其它层下的。

从嘟嘟的Blog上抄来了一段对这两个参数的详细说明：

    wmode 属性/参数

    值 Window | Opaque | Transparent

    说明：

    （可选）允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows 中有效。

    “Window”在 Web 页上用影片自己的矩形窗口来播放应用程序。“Window”表明此 Flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。
    “Opaque” 使应用程序隐藏页面上位于它后面的所有内容。
    “Transparent”使 HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。
    “Opaque windowless”和“Transparent windowless”都可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。

    这两种选项之间的差异在于“Transparent”允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的 HTML 层可以透过该部分显示出来，而“opaque”则不会显示。

    如果忽略此属性，默认值为 Window。仅适用于 object。