兼职多浏览器右下角浮动效果

作者：袖梨 2022-07-02

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.***w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

提示：您可以先修改部分代码再运行

兼职多浏览器右下角浮动效果
<title>无标题文档</title>
<style type="text/<a href=" http: target="_blank">css">
	 * { margin:0; padding:0;}
	 body { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.5em;}
	 #layout {   background:#ddd; margin:0 auto; position:relative;}
	 #AdBox { position:absolute; right:0; bottom:0; background:#E1F0FF; border:1px solid #86C2FF;overflow:hidden;}
	 #AdBox h3 { background:#6FB7FF; font-size:14px;  line- color:#fff; font-weight:normal; padding:0 5px; margin:1px; cursor:pointer;}
	 #AdBox h3 span { float:right;}
	 #AdBox h3 span a { font-size:12px; padding:0 3px; color:#fff; text-decoration:none;}
	 #AdBox p { padding:5px;}
</style>
<script type="text/javascript">
	adBox = {
		step:5,
		maxScrollHeight:0,
		
		init:function(){
			this.layout = document.getElementById('layout');
			this.showBtn = document.getElementById('show');
			this.closed = document.getElementById('close');
			this.AdBox = document.getElementById('AdBox');
			this.AdBoxHeight = this.AdBox.offsetHeight;
			var h3 = this.AdBox.getElementsByTagName('h3')[0];
			var h3h3')[0].offsetHeight;
			var pp')[0].offsetHeight;
			this.allHeight = h3Height + pHeight;
			this.showBtn.onclick = this.show.bind(this);
			this.setOffset(this.AdBox)();
			window.onscroll = this.setOffset(this.AdBox);
			
			this.closed.onclick = function(){
				adBox.AdBox.parentNode.removeChild(adBox.AdBox);
			}
		},
		
		setOffset: function(element){
			var windowInfo = getWindowInfo();
			return function(){
				element.style.bottom = (windowInfo.ContentHeight - windowInfo.Height - document.documentElement.scrollTop)+"px";
				element.style.right = -(windowInfo.Width - adBox.layout.offsetWidth)/2  +"px";
			}
		},

show:function(){
			if(this.AdBox.className == 'show'){
				this.dijia();
			}else{
				this.dijian();
			}
		},
		
		dijia:function(){
			this.maxScrollHeight += this.step;
			if(this.maxScrollHeight <= 170){
				this.AdBox.style.px';
				setTimeout(function(){adBox.dijia();}, 15);
			}else{
				this.maxScroll;
				adBox.AdBox.className = "";
				this.showBtn.innerHTML = "合并"
				return;
			}
		},
		
		dijian:function(){
			this.maxScrollHeight += this.step;
			if(this.maxScrollHeight <= 170){
				this.AdBox.style.px';
				setTimeout(function(){adBox.dijian();}, 15);
			}else{
				this.maxScroll;
				adBox.AdBox.className = "show";
				this.showBtn.innerHTML = "展开"
				return;
			}
		}

}

function $A(){
	var array = [];
	for(var i=0, n=arguments[0].length; i<n; i++){
		array.push(arguments[0][i]);
	}
	return array;
}

Function.prototype.bind = function(){
	var _method = this, args = $A(arguments), object = args.shift();
	return function(){
		_method.apply(object, args.concat($A(arguments)));	
	}
}

function _replace(str){
	return parseInt(str.replace('px',''));
}

/***********************************************************
* Description: To get infos in browser windows
* Function name: getWindowInfo()
* returnValue: object
***************************************************************/
function getWindowInfo()
{
	var scrollX=0,scrollY=0,,,content,content;
	if(typeof(window.pageXOffset)=='number')
	{
		scrollX=window.pageXOffset;
		scrollY=window.pageYOffset;
	}
	else if(document.body&&(document.body.scrollLeft||document.body.scrollTop))
	{
		scrollX=document.body.scrollLeft;
		scrollY=document.body.scrollTop;
	}
	else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop))
	{
		scrollX=document.documentElement.scrollLeft;
		scrollY=document.documentElement.scrollTop;
	}
	if(typeof(window.innerWidth)=='number')
	{
		width=window.innerWidth;
		height=window.innerHeight;
	}
	else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
	{
		width=document.documentElement.clientWidth;
		height=document.documentElement.clientHeight;
	}
	else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
	{
		width=document.body.clientWidth;
		height=document.body.clientHeight;
	}
	if(document.documentElement&&(document.documentElement.scrollHeight||document.documentElement.offsetHeight))
	{
		if(document.documentElement.scrollHeight>document.documentElement.offsetHeight)
		{
			contentWidth=document.documentElement.scrollWidth;
			contentHeight=document.documentElement.scrollHeight;
		}
		else
		{
			contentWidth=document.documentElement.offsetWidth;
			contentHeight=document.documentElement.offsetHeight;
		}
	}
	else if(document.body&&(document.body.scrollHeight||document.body.offsetHeight))
	{
		if(document.body.scrollHeight>document.body.offsetHeight)
		{
			contentWidth=document.body.scrollWidth;
			contentHeight=document.body.scrollHeight;
		}
		else
		{
			contentWidth=document.body.offsetWidth;
			contentHeight=document.body.offsetHeight;
		}
	}
	else
	{
		contentWidth=width;
		contentHeight=height;
	}
	if(height>contentHeight)
		height=contentHeight;
	if(width>contentWidth)
		width=contentWidth;
	var rect=new Object();
	rect.ScrollX=scrollX;
	rect.ScrollY=scrollY;
	rect.Width=width;
	rect.Height=height;
	rect.ContentWidth=contentWidth;
	rect.ContentHeight=contentHeight;
	return rect;
}
window.onload = function(){adBox.init();}
</script>

<div id="layout">
	<div id="AdBox" class="" style="">
	<h3>
<span></span>vel illum dolore eu feugiat nulla</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
</div>
</div>

提示：您可以先修改部分代码再运行

兼职多浏览器右下角浮动效果

相关文章

精彩推荐