<!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="utf-8">
<meta name="author" content="">
<meta name="homepage" content="">
</head>
<style>
<!--
.div{
position: absolute;
border: 1px solid blue;
background-color: #efefef;
line-height:60px;
font-size:12px;
z-index:1000;
}
-->
</style>
<body>
<div id="Javascript.Div1" class="div" style="width: 240px;" align="center">正中...</div>
<script language="javascript">
function sc1(){
document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+document.body.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;" align="center">左上...</div>
<script language="javascript">
function sc2(){
document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop+document.body.scrollTop)+"px";
document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";
}
</script>
<div id="Javascript.Div3" class="div" style="width: 240px;" align="center">左下...</div>
<script language="javascript">
function sc3(){
document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.body.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;" align="center">右上...</div>
<script language="javascript">
function sc4(){
document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop+document.body.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;" align="center">右下...</div>
<script language="javascript">
function sc5(){
document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.body.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="height: 4000px;"></div>
</body>
</html>
分享到:
相关推荐
随滚动条移动的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 在线测试...