Dzwebs.Net

撰写电脑技术杂文十余年

DIV+CSS+javascript实现DIV对象显示在页面任何位置,并随滚动条移动

Admin | 2007-11-11 20:28:43 | 被阅次数 | 45620

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

利用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="/AboutWeb.aspx" 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显示的位置,可适当修改以上代码,即可实现!!!


该杂文来自: 网页制作杂文

上一篇:div+css实现网页模块或栏目拖动(即拖拽效果)

下一篇:关闭页面不出现提示的多种解决方案

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计