以下是一个对联代码,如果大家喜欢,可以粘贴复制。 <!doctype html> <html> <head> <meta charset=”utf-8″& […]
以下是一个对联代码,如果大家喜欢,可以粘贴复制。
<!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)
{ www.xminseo.com
document.documentElement.scrollTop = document.body.scrollTop = iScrollTop;
}
//获得计算后的样式
function getStyle(obj,attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
}
</script>
</body>
</html>
最后编辑于:2019-11-13 10:19:20
原文链接:https://www.xminseo.com/14697.html