`
- 浏览:
1599553 次
- 性别:
-
-
<!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
>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
随滚动条移动的DIV层
简易的jquery层随滚动条移动,很简单,很方便
层随滚动条滚动,兼容火狐,谷歌,IE 7 8都可以 9效果稍差
随滚动条移动的层
随滚动条移动的层! 很值得下载看看!资源免费,大家分享!!
js固定层不随滚动条滚动图片广告固定层在顶部
随滚动条移动的5个层(左上、左下、中间、右上、右下)
返回top时,根据滚动条移动来判断是否显示。 另有跳转到指定div.
根据滚动条移动的多层浮动效果,实现页面广告效果。
主要介绍了jQuery控制div实现随滚动条滚动效果,对比分析了两种实现方法供大家参考选择,需要的朋友可以参考下
项目需求是这样的:在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置,下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料,对js div跟随滚动条滑动相关...
Dreamweaver常用插件。 图片渐隐效果.mxp 随机移动的层.mxp 随机图片.mxp 随滚动条移动的层.mxp 滚动条颜色.mxp 等等。。。
jQuery Dialog弹出层对话框插件演示,简单的那种,看上去比较不错,下面说一下用法: ... 非fixed模式 new Dialog(‘对话框不随滚动条移动‘,{fixed:false}).show(); 显示指定ID的内容 // 将显示本标签内的内容。 ……
在网上找的比较不错的弹出层。 实例有: 可以打开多个; 自动关闭;...非fixed模式(对话框不随滚动条移动); 显示指定ID的内容; 加载一张图片; 加载一URL地址; 加载一URL到iframe; 回调函数。
在网站制作中,可以添加四周的广告条,随下拉而移动,非常实用
2、网页左侧实现带关闭按钮、随滚动条上下移动的广告层 3、随机漂浮的图片广告 4、向上、向左滚动的信息(利用marquee跑马灯实现) 5、最热招聘(本页内链接) 6、页面打开时,弹出广告窗口 7、二级的横向菜单,...
3、在页面的右侧有一个随滚动条上下移动的广告图片,并且图片上方有一个“关闭”按钮,单击“关闭”按钮,图片和“关闭”按钮均隐藏 4、页面中间的特效是带数字按钮的循环显示的图片广告,六张图片按规定的时间间隔...
由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动...
17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...