您的位置：首页 > Web前端 > JavaScript

随滚动条移动的层

2009-08-20 15:55 218 查看

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



<
html

xmlns

=
"http://www.w3.org/1999/xhtml"

>



<
HEAD
>



<
TITLE
>

随滚动条移动的层
</
TITLE
>



<
META

HTTP-EQUIV

=
"Content-Type"

CONTENT

=
"text/html"

charset

=
"gb2312"

>



<
META

NAME

=
"Author"

CONTENT

=
"haiwa"

>



<
META

NAME

=
"homepage"

CONTENT

=
"www.chinaz.com"

>



</
HEAD
>



<
style
>



<!--

.div{

position: absolute;

border: 2px solid red;

background-color: #EFEFEF;

line-height:90px;

font-size:12px;

z-index:1000;

}

--
>



</
style
>



<
BODY
>



<
div

id

=
"Javascript.Div1"

class

=
"div"

style

=
"width: 240px; height:90px"

align

=
"center"

>

正中...
</
div
>



<
SCRIPT

LANGUAGE

=
"JavaScript"

>



function sc1(){

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
>







<
div

id

=
"Javascript.Div2"

class

=
"div"

style

=
"width: 240px; height:90px"

align

=
"center"

>

左上...
</
div
>



<
SCRIPT

LANGUAGE

=
"JavaScript"

>



function sc2(){

document.getElementById("Javascript.Div2")
.style.top

=(document.documentElement.scrollTop)+"px";

document.getElementById("Javascript.Div2")
.style.left

=(document.documentElement.scrollLeft)+"px";

}

</
SCRIPT
>





<
div

id

=
"Javascript.Div3"

class

=
"div"

style

=
"width: 240px; height:90px"

align

=
"center"

>

左下...
</
div
>



<
SCRIPT

LANGUAGE

=
"JavaScript"

>



function sc3(){

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
>





<
div

id

=
"Javascript.Div4"

class

=
"div"

style

=
"width: 240px; height:90px"

align

=
"center"

>

右上...
</
div
>



<
SCRIPT

LANGUAGE

=
"JavaScript"

>



function sc4(){

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
>





<
div

id

=
"Javascript.Div5"

class

=
"div"

style

=
"width: 240px; height:90px"

align

=
"center"

>

右下...
</
div
>



<
SCRIPT

LANGUAGE

=
"JavaScript"

>



function sc5(){

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
>







<
SCRIPT

LANGUAGE

=
"JavaScript"

>



<!--

function scall(){

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

}

window.onscroll

=
scall

;

window.onresize

=
scall

;

window.onload

=
scall

;

//--
>



</
SCRIPT
>



<
div

style

=
"position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;"

>
</
div
>



</
BODY
>



</
HTML
>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： class div xhtml javascript border function

相关文章推荐

新的分享

章节导航