通行证: 用户 密码 网站建设  下载中心 社区论坛 信息公告 MY小屋
联系我们
设为首页
加入收藏

 

当前位置:首页>>网页设计>>网页特效>>正文
注:打开慢时请稍等

随滚动条移动的DIV层

http://www.iyit.net  日期:2007-1-18 14:31:06  来源:iyit.net录入  点击:
参加讨论

<!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>随滚动条移动的层 - www.chinaz.com</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>


编辑:iyit.net [发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇:百灵鸟网页特效 v6.2 下载
下一篇:多种网页弹出窗口代码 防拦截弹出窗口代码
转载请注明来源:www.iyit.net
特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。

 相关文章
网页最简短的拖动对象代码实例演示 多种网页弹出窗口代码 防拦截弹出窗口代 CSS中的滑动门技术
网页制作入门教程:关于css样式表 合理的网页设计具有哪些特征 从基础到精通:CSS实用教程(三)
从基础到精通:CSS实用教程(二) 从基础到精通:CSS实用教程(一) CSS样式表:详细介绍IE7新支持的选择器
用CSS设计网页艺术字效果 页面控制常见问题及解决办法  网页设计中HTML常犯的五个错误 
教你用好活动字幕标记--Marquee  用Dreamweaver8搞定web标准 用Dreamweaver设计限时自动关闭的网页
用Dreamweaver制作细边表格 用falsh制作黑客帝国数字流 常用JS网页广告代码,网页特效
百度的首页简单吗?新浪的首页复杂吗? Dreamweaver网页中实用的制作技巧 Dreamweaver经典问题大搜罗
解决Deamweaver8中CSS应用无效问题 如何在Dreamweaver中使用库项目 Dreamweaver MX 2004的Flash动画元素
最新更新 热点排行 推荐新闻
网页最简短的拖动对象代码实例演示
多种网页弹出窗口代码 防拦截弹出窗口
随滚动条移动的DIV层
百灵鸟网页特效 v6.2 下载
网页特效制作专家 v11.99 下载
周期短回报奇高 中文域名上演创富神话
asp和javascript大小写字母转换函数
网页最简短的拖动对象代码实例演示
多种网页弹出窗口代码 防拦截弹出窗口
随滚动条移动的DIV层
eval()函数(javascript) JavaScript小
年损失达63.8亿 企业亟需高效反垃圾邮
审批政策松动 地名.travel旅游域名注册
多服务器转发邮局 应对网络通信故障
文化内涵使用价值并重 中文域名倍受青
网页特效制作专家 v11.99 下载
让浏览器在保存页面时保存失败 
禁用鼠标右键:禁用鼠标右键功能。可以
百灵鸟网页特效 v6.2 下载
验证输入信息:对输入文本框的内容作出
msn8.0下载、msn shell、msn8.0中文版
金山词霸2007未上市即遭盗版
QQ挂太阳专家 V1.0.3  下载
Windows Vista 5840简体中文版体验心得
电脑主板知识大全图文版 
简单实用 最新刷QQ等级方法 
sxs.exe病毒清理办法,手动清楚方法 ̄!
猖狂的Sxs.exe病毒处理方法
QQ病毒专杀工具 下载
北大奇侠传--三学生自创北大首款网游 
网页最简短的拖动对象代码实例演示
多种网页弹出窗口代码 防拦截弹出窗口
随滚动条移动的DIV层
网页特效制作专家 v11.99 下载
拖动图片特效
asp和javascript大小写字母转换函数
网页最简短的拖动对象代码实例演示
多种网页弹出窗口代码 防拦截弹出窗口
随滚动条移动的DIV层
eval()函数(javascript) JavaScript小
高手清除系统垃圾完全手册(3)
高手清除系统垃圾完全手册(2)
高手清除系统垃圾完全手册(1)
2007,个人站长何去何从?
提示“虚拟内存”不足的怎么办

设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接
Copyrights © 2004-2007 iYiT.Net All Rights Reserved.
网站合作、广告联系QQ:147007642、466949678
易特网络技术 点击这里给我发消息