对联代码分享

<!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)

{ http://www.xiyuandesign.cn/[?]

document.documentElement.scrollTop = document.body.scrollTop = iScrollTop;

}

//获得计算后的样式

function getStyle(obj,attr)

{

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

}

}

</script>

</body>

</html>

追加问题
    3 人参与回答
seo优化
seo优化 · 小泽seo博客,擅长seo优化,欢迎同行交流

收藏了

l
lyndo · 软件开发公众号开发 小程序开发

来学习的

谢谢分享