js对联广告代码(左右两侧悬浮对联广告)

发布时间:2020-05-15编辑:脚本学堂
一例js对联广告代码,兼容性不错的左右悬浮对联广告代码,当页面滚动或者页面缩放时随之滚动,效果不错,供大家学习参考。

例子,js实现的对联广告

复制代码 代码示例:
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>对联广告js</title> 
<style> 
*{ margin:0; padding:0;} 
#content{ width:960px; height:3000px; margin:0 auto; border:1px solid #CCC;} 
#advLeft,#advRight{ position:fixed; top:100px; width:100px; height:400px; background:#CCC;} 
#advLeft{ left:50%; margin-left:-591px;} 
#advRight{ left:50%; margin-left:491px;} 
</style> 
</head>
<body> 
<div id="content"> 
</div> 
<a id="advLeft" href="javascript:;">左</a> 
<a id="advRight" href="javascript:;">右</a> 
<script> 
window.onload = function() 

ie6Fixed('advLeft','advRight'); 

 
function ie6Fixed(oAdvLeft,oAdvRight) 

if(window.navigator.userAgent.indexOf('MSIE 6')==-1){return '';} //如果浏览器非IE6则返回; 
var oAdvL = document.getElementById(oAdvLeft); //获取左联 
var oAdvR = document.getElementById(oAdvRight); //获取右联 
var iAdvTop = parseInt(getStyle(oAdvL,'top')); //获取对联的初始顶部值 
var iAdvHeight = parseInt(getStyle(oAdvL,'height')); //获取对联的初始高度值 
 
oAdvL.style.overflow = oAdvR.style.overflow = 'hidden'; 
oAdvL.style.position = oAdvR.style.position = 'absolute'; 
 
window.onscroll = window.onresize = function()//当页面滚动或者页面缩放时 

if(document.documentElement.clientHeight <= iAdvHeight + iAdvTop)//如果窗口高度小于等于对联的初始高度与初始顶部值之和 

setScrollTop(getScrollTop());//设置scrollTop 
oAdvL.style.height = oAdvR.style.height = Math.max(0,document.documentElement.clientHeight-iAdvTop) + 'px'; //设置对联的高度,防止页面滚动到底部时继续向下滚动 

else 

oAdvL.style.height = oAdvR.style.height = iAdvHeight + 'px';//如果窗口高度大于对联的初始高度与初始顶部值之和还原对联初始值 

 
oAdvL.style.top = oAdvR.style.top = getScrollTop()+iAdvTop+'px';//设置对联的顶部值 
}
 
//获得scrollTop 
function getScrollTop() 

return document.documentElement.scrollTop || document.body.scrollTop; 

//设置scrollTop 
function setScrollTop(iScrollTop) 
{
document.documentElement.scrollTop = document.body.scrollTop = iScrollTop; 

//获得计算后的样式 
function getStyle(obj,attr) 

return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr]; 


</script> 
</body> 
</html> 
更多精彩内容,请关注本站的js广告代码栏目。