网页特效：随浏览器滚动条移动的DIV层

2011-05-23 01:02

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

<htmlxmlns="http://www.w3.org/1999/xhtml">

<HEAD>

<TITLE>随滚动条移动的层-webjx.com</TITLE>

<METAHTTP-EQUIV="Content-Type"CONTENT="text/html"charset="gb2312">

<METAname="Author"CONTENT="flasher">

<METAname="homepage"CONTENT="www.webjx.com">

</HEAD>

<style>

<!--

.div{

position:absolute;

border:2pxsolidred;

background-color:#EFEFEF;

line-height:90px;

font-size:12px;

z-index:1000;

}

-->

</style>

<BODY>

<divid="Javascript.Div1"class="div"style="width:240px;height:90px"align="center">正中...</div>

<SCRIPTLANGUAGE="JavaScript">

functionsc1(){

document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";

document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";

}

</SCRIPT>

<divid="Javascript.Div2"class="div"style="width:240px;height:90px"align="center">左上...</div>

<SCRIPTLANGUAGE="JavaScript">

functionsc2(){

document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+"px";

document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";

}

</SCRIPT>

<SCRIPTLANGUAGE="JavaScript">

functionsc3(){

document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";

document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft)+"px";

}

</SCRIPT>

<SCRIPTLANGUAGE="JavaScript">

functionsc4(){

document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+"px";

document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";

}

</SCRIPT>

<SCRIPTLANGUAGE="JavaScript">

functionsc5(){

document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";

document.getElementById("Javascript.Div5").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth)+"px";

}

</SCRIPT>

<SCRIPTLANGUAGE="JavaScript">

<!--

functionscall(){

sc1();sc2();sc3();sc4();sc5();

}

window.onscroll=scall;

window.onresize=scall;

window.onload=scall;

//-->

</SCRIPT>

<divstyle="position:absolute;top:0px;left:0px;width:10000px;height:4000px;"></div>

</BODY>

</HTML>

网页特效：随浏览器滚动条移动的DIV层

相关推荐