会员
周边
众包
新闻
博问
闪存
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
行成于思,行胜于言
記住該記住的,忘記該忘記的,改變能改變的,接受不能改變的。
博客园
首页
新随笔
联系
订阅
管理
[转]随滚动条滚动的层(支持IE6,FF2)
<!
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
runat
="server"
>
<
title
>
未命名頁面
</
title
>
<
meta
HTTP-EQUIV
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
style
>
.xScrollStick
{
}
{
position
:
absolute
;
padding
:
15px
;
border
:
1px solid black
;
width
:
120px
;
height
:
24px
;
}
</
style
>
<
script
language
="javascript"
>
//
<![CDATA[
//
********************/
//
x 系列之 xScrollStick
//
作者:Hutia
//
未经同意不得转载或用于商业用途
//
********************/
/**/
/*
说明:
x系列是Hutia开发的系列JS代码,配合相应的css后可以实现快速的自定义标签
目前xScrollStick支持的浏览器类型为:IE5.5, FF1.5
xScrollStick的标签为
<div class="xScrollStick">
Content
</div>
支持属性:
无
支持方法:
无
*/
//
**载入CSS***** spcssxframe.css
var
xScrollStickCssFilePath
=
"
sp\/css\/xframe.css
"
;
//
document.write("<style>@import url("+xScrollStickCssFilePath+");</style>");
//
**检测浏览器种类*****
var
BROWSERNAME
=
""
;
switch
(navigator.appName.toLowerCase())
{
case
"
netscape
"
:
BROWSERNAME
=
"
ns
"
;
break
;
case
"
microsoft internet explorer
"
:
default
:
BROWSERNAME
=
"
ie
"
;
break
;
}
//
**设置初始化事件******
switch
(BROWSERNAME)
{
case
"
ns
"
:
window.addEventListener(
"
load
"
,_xScrollStick_init,
false
);
break
;
case
"
ie
"
:
default
:
window.attachEvent(
"
onload
"
,_xScrollStick_init);
}
//
**初始化函数******
function
_xScrollStick_init()
{
var
allTheScrollSticks
=
document.getElementsByTagName(
"
div
"
);
for
(
var
i
=
0
;i
<
allTheScrollSticks.length;i
++
)
{
if
(allTheScrollSticks[i].className.match(
/
^((xScrollStick)|(.+ +xScrollStick)|(xScrollStick +.+)|(.+ +xScrollStick +.+))$
/
))_xScrollStick_event_doInit(allTheScrollSticks[i]);
}
window_event_scroll();
}
//
**事件响应函数区******
function
_xScrollStick_event_doInit(element)
{
//
初始化变量
element.offX
=
element.offsetLeft;
element.offY
=
element.offsetTop;
//
设置方法
element.Stick
=
_xScrollStick_method_Stick;
//
设置事件
switch
(BROWSERNAME)
{
case
"
ns
"
:
window.addEventListener(
"
scroll
"
,window_event_scroll,
false
);
break
;
case
"
ie
"
:
default
:
window.attachEvent(
"
onscroll
"
,window_event_scroll);
}
//
获取设置
//
无
document.body.parentNode.onscroll
=
window_event_scroll;
}
function
window_event_scroll()
{
var
allTheScrollSticks
=
document.getElementsByTagName(
"
div
"
);
for
(
var
i
=
0
;i
<
allTheScrollSticks.length;i
++
)
{
if
(allTheScrollSticks[i].className.match(
/
^((xScrollStick)|(.+ +xScrollStick)|(xScrollStick +.+)|(.+ +xScrollStick +.+))$
/
))
try
{allTheScrollSticks[i].Stick();}
catch
(e)
{}
}
}
//
**方法函数区******
function
_xScrollStick_method_Stick()
{
var
x
=
this
.offX, y
=
this
.offY, po
=
this
;
this
.style.position
=
"
absolute
"
;
x
+=
document.body.parentNode.scrollLeft;
y
+=
document.body.parentNode.scrollTop;
this
.style.left
=
x
+
"
px
"
;
this
.style.top
=
y
+
"
px
"
;
}
//
**通用函数区***
//
无
//
]]>
</
script
>
</
head
>
<
body
>
<
div
class
="xScrollStick"
style
="left:0px;top:0px"
>
Content
..
</
div
>
<
div
style
="top:0px;width:400px;height:2000px; padding-left:80px;"
>
afosdhfosdhg
<
br
>
afosdhfosdhg
<
br
>
afosdhfosdhg
<
br
>
afosdhfosdhg
<
br
>
afosdhfosdhg
<
br
>
afosdhfosdhg
<
br
>
afosdhfosdhg
<
br
>
afosdhfosdhg
<
br
>
afosdhfosdhg
<
br
>
afosdhfosdhg
<
br
>
afosdhfosdhg
<
br
>
afosdhfosdhg
<
br
>
</
div
>
</
body
>
</
html
>
posted @
2008-07-21 15:16
江湖工夫
阅读(
1136
) 评论(
0
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部
公告