<!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>随滚动条移动的层 - 5217.cn</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
<META NAME="Author" CONTENT="flasher">
<META NAME="homepage" CONTENT="www.5217.cn">
</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>
分享到:
相关推荐
点击按钮弹出一个悬浮层,出现在中间位置。
NULL 博文链接:https://xiaomozhuzhu.iteye.com/blog/1668073
点击按钮弹出悬浮层,层上有数据且可以关闭 页面点击按钮后出现遮罩层,遮罩层上面有其他内容可显示,包含关闭遮罩层按钮。 需要显示详情,但是不想从新写一个页面。所以选择弹出层,一层遮罩层,一层显示详情层,...
jquery 悬浮 导航栏
Xamarin.Android开发页面弹出悬浮框,弹出层遮挡底层主页面,悬浮框半透明。测试通过源码下载(图片源码没有上传)。
在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失。 比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: <!doctype ...
页面内的超级酷浮动窗口.htm 仿frontpage可拖曳的对话窗口.htm 点击弹出窗口层,并且背景变暗渐变.htm 设定时间弹出窗口.htm ...表格或层往下慢慢展开的效果.htm ...五种网页弹出窗口实例代码.txt 提示框窗口自动居中.html
Xamarin.Android开发页面弹出悬浮框,弹出层遮挡底层主页面,悬浮框半透明。测试通过源码下载(图片源码没有上传),压缩文件中有最终效果拍照。
3.点击图标弹出层,显示客服电话号码,点击拨号自动拨号显示的电话号码;4.带关闭按钮 代码适用于手机网页客服电话显示特效,需要懂点网页前端知识整合使用,代码为网页特效代码,下载者应当遵守相关法律法规,遵守...
背景:学习前端知识,自己做页面 目的:学习前端知识 组网图:不涉及 工具:HBuilder X 简介:鼠标悬停实现显示与隐藏二维码效果; 鼠标悬停实现显示与隐藏二维码效果,实现的效果如下: 鼠标悬停在微信图标显示...
鼠标悬停在按钮上弹出DIV层页面,可以点击页面上的链接什么的,鼠标离开后层消失,完美的jquery实例效果,当当网门户效果展示!
BS页面实现Skyline平台下使用...实现popup内嵌html页面(标注输入界面),点击保存后更改标注图像,添加标注名称在鼠标悬浮在图像标注上显示名称的效果(最好把文件发布在iis上,要不然会在popup中弹出安全警告!)
原生Js浮动弹出层 可拖动 关闭和最小化,用到了几个小图片,分别是标题栏、关闭按钮和最小化按钮,关闭和最小化我... 例子页面演示了三种内容的拖动弹出层,分别是图片、文字和图文混合方式,各有各的用途,仅供参考。
这里有4个例子,分别实现了用div弹出窗体,并在页面上覆盖一层,实现锁屏...
主要介绍了js鼠标悬浮出现遮罩层的方法,以实例形式较为详细的分析了html及css页面布局与js特效的实现方法,是非常实用的技巧,需要的朋友可以参考下
在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息。...1、jsp页面上弹出层的代码 <!-- 物流详情弹出页面 start --> <div class=logisticscenter_xq style=display: none; i
用html+css+js/jquery实现的点击按钮弹出一个层窗口效果。注释部分使用js实现的,script部分则是jquery实现的,效果更好一些。可以把jquery部分注释掉来看js的效果
3、在应用的页面上触发启动这个窗口,该窗口悬浮在这个页面上,但又不会影响界面的其他操作。即不像PopupWindow那样要么窗口消失要么页面不可响应 以上需求都有几个共同特点,1、窗口的承载页面不一定不是本应用...
基于 AngularJS 的浮层组件,由 artDialog 演进而来。 使用 AngularJS 自带的ng-if、ng-show、ng-hide控制...可以指定元素对齐或者页面居中显示 可以使用模态特性 演示站点:https://aui.github.io/angular-popups/
css3实现的点击按钮弹出无刷新交互遮罩层特效源码是一段实现了点击按钮后会直接弹出一个悬浮的无刷新交互遮罩层效果,在此遮罩层内会出现相关的内容及表单、按钮效果,功能非常强大且实用,本段代码适应于所有网页...