DIV+CSS+javascript实现DIV对象显示在页面任何位置,并随滚动条移动
2008-02-15 22:28
1001 查看
利用DIV+Css+javascript可以轻松实现DIV对象显示在页面的任何位置,并能随滚动条的位置而改变!
以下实现DIV对象随滚动条移动,始终显示在页面右下位置!
一:首先在head区域加入如下代码:
<SCRIPT LANGUAGE="JavaScript">
<!--
function scall()
{
ShowBottoms();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->
</SCRIPT>
二:在HEAD区域加入如下CSS代码:
<style type="text/css">
<!--
/* CSS Document */
#ShowBottom {
font:Arial, Helvetica, sans-serif;
font-size:14px;
width: 60px;
height:50px;
background:#FFFFFF;
border-right-color:#377CA6;
border-right-width:1px;
border-right-style:solid;
border-left-color:#377CA6;
border-left-width:1px;
border-left-style:solid;
border-top-color:#377CA6;
border-top-width:1px;
border-top-style:solid;
border-bottom-color:#377CA6;
border-bottom-width:1px;
border-bottom-style:solid;
position:absolute; bottom:0px; right:0px;
}
-->
</style>
三:在页面中的BODY任何地方加入如下代码
<div id=“ShowBottom“>初来乍到<br/>我想了解<br /><a HREF="www.51qqdm.cn" target="_blank">网站宗旨</a></div>
//下面这段代码必须跟在以上的DIV下面,否则就出错误!
<SCRIPT LANGUAGE="JavaScript">
<!--
function ShowBottoms()
{
document.getElementById("ShowBottom").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("ShowBottom").offsetHeight)+"px";
document.getElementById("ShowBottom").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("ShowBottom").offsetWidth)+"px";
}
</SCRIPT>
如果想改变DIV显示的位置,可适当修改以上代码,即可实现!!!
相关文章推荐
- css,js实现在鼠标移动到一个位置在这个位置下面显示一个已经存在的div,这个div的位置随意
- css实现div悬浮层,始终停留在浏览器的最下方,不随页面的滚动条滚动改变位置或消失
- jquery实现页面滑动到固定位置显示某个div
- DIV中滚动条设置到随机位置(CSS+Javascript)
- DIV中滚动条设置到随机位置(CSS+Javascript)
- 如何实现广告图片总是显示在页面上方,并且随滚动条同步移动?
- 完整的html+css+javascript实现跟随鼠标移动显示选中效果
- javaScript实现在浏览器状态栏显示鼠标在页面中的当前位置
- js实现html页面滚动条向下拉到一定的程度时,某个div就固定在顶部,向上拉时返回原位置。
- 纯CSS+DIV轻松解决对象在任何位置上水平对齐的问题
- JS获取div滚动条距离实现弹出标签位置动态移动
- DIV中滚动条设置到随机位置(CSS+Javascript)
- JS+CSS实现几个DIV层上下移动交换位置的效果
- javascript实现鼠标点击页面 移动DIV
- DIV中滚动条设置到随机位置(CSS+Javascript)
- 基于JavaScript实现点击页面任何位置返回
- 有了html页面,进行二次显示,通过html、JavaScript、jQuery的ajax三种技术,我可以实现任何界面效果
- css实现div自动添加滚动条(图片或文字等超出时显示)
- DIV中滚动条设置到随机位置(CSS+Javascript)
- js实现div滚动条在页面刷新 滚动条位置固定