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