纯js实现常用漂浮广告代码,兼容ie6火狐360谷歌等主流浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<style>
.floatAd  {border:1px solid #999999; padding:3px; cursor:pointer; overflow:hidden; background:#FFF}
.floatAd  img{ padding:0; margin:0; border:0}
.floatAd .close{ margin-top:3px;background:#999999; display:block;  height:25px; line-height:25px; font-size:13px; text-align:center; color:#FFF; text-decoration:none;font-family:"Microsoft YaHei",fae8f6f96c59ed1,arial,b8bf53;}
.floatAd .close:hover{ background:#0066cc}
</style>

<div class="floatAd" id="ad2222" style="left:0px; position:absolute; top: 0px; width:120px;  height:auto;">
  <img src="http://ubmcmm.baidustatic.com/media/v1/0f000auhI2jLjHgIzqY5jf.jpg" /> 
  <a class="close" style="" href="javascript:void(0)">关闭</a>
</div>

<div class="floatAd" id="ad" style="left:10000px; position:absolute; top: 900px; width:190px; height:auto;"> 
  <h2 align="center">友情提示</h2>
  <p align="center">望悲伤难忘,<br/>累使得人累,<br/>只愿你相知! </p>
  <a class="close" style="" href="javascript:void(0)">关闭</a>
</div>


<script>

//用法5种：假设<div id="me"> <span class="no">water down!</span> </div>；
//1. var water = getElementsByClassName('no'); alert(hi.length);
//----获取document下所有class为'no'的所有元素；
//2. var water = getElementsByClassName('no', {tagName: 'span' } );
//----获取标签名为 span 且class为'no' 的所有元素；
//3. var water = getElementsByClassName('no', {parentObj : 'me' } );
//----在id为'me'的标签下找 class为'no'的所有元素；
//4. 在var $ = function(id){return document.getElementById(id);};之类的情况下。
//var water = getElementsByClassName('no', {parentObj :$('me') } );
//----在id为'me'的对象下找 class为'no'的所有元素；
//5. var water = getElementsByClassName('no', {parentObj : 'me' , tagName:'span' } );
//----在id为'me'的标签下找 class为'no'且标签名为'span'的所有元素；


function getElementsByClassName(className,term){
    var parentEle=null;
    if(term.parentObj){ parentEle = typeof term.parentObj=='string'
    ? document.getElementById(term.parentObj) : term.parentObj;}
    var rt = [],coll= (parentEle==null?document:parentEle).getElementsByTagName(term.tagName||'*');
    for(var i=0;i<coll.length;i++){
        if(coll[i].className.match(new RegExp('(\s|^)'+className+'(\s|$)'))){
            rt[rt.length]=coll[i];
        }
    }
    return rt;
}

function FloatAd(elementId) {
	this.element = document.getElementById(elementId);
	this.elementId = elementId;
	
	this.x = parseInt(isNaN(this.element.style.left)?this.element.style.left:0);
	this.y = parseInt(isNaN(this.element.style.top)?this.element.style.top:0);
	this.xin = true;
	this.yin = true;
	this.step = 1;
	this.delay = 20;
	//滚动
	this.run();
} 
//显示浮动窗口
FloatAd.prototype.float = function() {
	var clientWidth = document.documentElement.clientWidth;
	var clientHeight = document.documentElement.clientHeight;
	var scrollLeft = document.documentElement.scrollLeft;
	var scrollTop = document.documentElement.scrollTop;
	//判断是否添加了W3C的声明
	if ( document.compatMode!="CSS1Compat" ){
		clientWidth = document.body.clientWidth;
		clientHeight = document.body.clientHeight;
		scrollLeft = document.body.scrollLeft;
		scrollTop = document.body.scrollTop;
	}
	
	
	
	var L = T = 0;
	var R = parseInt(clientWidth) - parseInt(this.element.clientWidth);
	var B = parseInt(clientHeight) - parseInt(this.element.clientHeight);
	this.element.style.left = this.x + scrollLeft + 'px';
	this.element.style.top  = this.y + scrollTop + 'px';
	this.x = this.x + this.step * (this.xin ? 1 : -1);
	if (this.x < L) {
		this.xin = true;
		this.x = L;
	};
	if (this.x > R) {
		this.xin = false;
		this.x = R;
	};
	this.y = this.y + this.step * (this.yin ? 1 : -1);
	if (this.y < T) {
		this.yin = true;
		this.y = T;
	};
	if (this.y > B) {
		this.yin = false;
		this.y = B;
	};
};
//隐藏浮动窗口
FloatAd.prototype.destroy = function() {  
    var that = this;
	if(this.interval){
		window.clearInterval(that.interval);
		this.element.parentNode.removeChild(this.element);
	}
};
//运行
FloatAd.prototype.run = function() {
	//自动设置 定时事件
	var that = this;
	this.interval = window.setInterval(function(){
		that.float();
	},that.delay);
	
	this.element.onmouseover = function() {
		window.clearInterval(that.interval);
	};
	this.element.onmouseout = function() {
		that.interval = window.setInterval(function(){
			that.float();
		},that.delay);
	};
	
	var closeBtn = getElementsByClassName('close', {parentObj : that.elementId  } )[0];
	closeBtn.onclick = function() {
		that.destroy();
	};
	
};

new FloatAd( 'ad2222' );

new FloatAd( 'ad' );
</script>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</body>
</html>
七零部落格

搜索

标签云

最新文章

友情链接

纯js实现常用漂浮广告代码,兼容ie6火狐360谷歌等主流浏览器
