浮层java_页面div浮动层

最近项目要在页面上作一个消息通知的浮动窗体，找了一些资料但不太合适，只好自己动手改动一下了。开始想把浮动层定位到右下角，由于对浏览器的一些属性不熟悉，跨浏览器就出现了问题——无法准确的定位到底部，只好退而求其次了，在中间位置进行浮动。代码在IE6、IE7、Firefox3.0运行正常。

在html页面body加入如下div：

id="divbox">

οnmοuseοver="func_show()">通知

style="display:none" οnmοuseοut="func_hideMsgBox(event)"

>

class="kfbt" id="qq-1">通知　　　　　

style="CURSOR: pointer;"

οnclick="func_close()">Ｘ

class="submenu">

class="kfhm

bgdh">aaaaaaaaaaaaa

class="kfhm

bgdh">bbbbbbbbbbbbb

class="kfhm

bgdh">ccccccccccccc

class="kfhm

bgdh">ddddddddddddd

class="kfhm

bgdh">eeeeeeeeeeeee

class="kfhm

bgdh">fffffffffffff

class="kfhm

bgdh">ggggggggggggg

class="kfhm

bgdh">hhhhhhhhhhhhh

在head标签中间加入如下JavaScript脚本：

var tips;

var theTop = 150;//定义距浏览器窗口顶部的距离

var old = theTop;

function func_initFloatTips() {

tips = document.getElementByIdx('divbox');

func_moveTips();

}

function func_moveTips(){

var tt=50;

if (windows.innerHeight){

pos =

window.pageYOffset }else if (document.documentElement

&&

document.documentElement.scrollTop) {

pos =

document.documentElement.scrollTop }else if (document.body) {

pos =

document.body.scrollTop; }

pos=pos-tips.offsetTop+theTop;

pos=tips.offsetTop+pos/10;

if (pos < theTop){

pos = theTop;

}

if (pos != old) {

tips.style.top =

pos+"px";

tt=10;

}

old = pos;

setTimeout(func_moveTips,tt);

}

function func_close(){

tips.style.display = "none";

}

function func_show(){

document.getElementByIdx("meumid").style.display="none";

document.getElementByIdx("contentid").style.display="block";

}

function func_hideMsgBox(theEvent){

if (theEvent){

var

browser=navigator.userAgent;

if

(browser.indexOf("Firefox")>0){ //如果是Firefox

if

(document.getElementByIdx("contentid").compareDocumentPosition(theEvent.relatedTarget)

& 16) {//如果是子元素

return;

}

}

if

(browser.indexOf("MSIE")>0 ||

browser.indexOf("Presto")>=0){ //如果是IE

if

(document.getElementByIdx('contentid').contains(event.toElement))

{ //如果是子元素

return; //结束函式

}

}

}

document.getElementByIdx("meumid").style.display =

"block";

document.getElementByIdx("contentid").style.display

= "none";

}

样式表：

HTML,BODY {

padding:0px;

margin:0px;

font-size:10pt;

}

.box a{

color:#333333;

text-decoration: none;

}

.box a:hover{

color:#FF0000;

text-decoration: underline;

}

.box {

RIGHT: 0px;

OVERFLOW: hidden;

WIDTH: 180px;

POSITION: absolute;

TOP: 150px;

HEIGHT: auto;

font-size:10pt;

}

.lv {

BORDER-TOP: #92B8E7 1px solid;

BACKGROUND: #EDF7FF;

FONT-WEIGHT: bold;

padding-top:40px;

FLOAT: right;

OVERFLOW: hidden;

BORDER-LEFT: #92B8E7 1px solid;

WIDTH: 15px;

POSITION: relative;

BORDER-BOTTOM: #92B8E7 1px solid;

HEIGHT: 140px;

}

.kf {

BORDER-RIGHT: #92B8E7 1px solid;

BORDER-TOP: #92B8E7 1px solid;

RIGHT: 0px;

BACKGROUND: #EDF7FF;

OVERFLOW: hidden;

BORDER-LEFT: #92B8E7 1px solid;

WIDTH: 178px;

BORDER-BOTTOM: #92B8E7 1px solid;

TOP: 0px;

HEIGHT: auto;

}

.submenu{

padding-top:4px;

padding-bottom:4px;}

.kfbt {

BORDER-RIGHT: #92B8E7 1px solid;

BORDER-TOP: #92B8E7 1px solid;

FONT-WEIGHT: bold;

BACKGROUND: #92B8E7;

OVERFLOW: hidden;

BORDER-LEFT: #92B8E7 1px solid;

WIDTH: 178px;

COLOR: #fff;

LINE-HEIGHT: 20px;

BORDER-BOTTOM: #92B8E7 1px solid;

POSITION: relative;

HEIGHT: 20px;

}

.bgdh{

width:90%;

height:19px;

line-height:19px;

text-align:left;

display:block;

margin:0 auto;

OVERFLOW: hidden;

font-family: Verdana, Arial, Helvetica,

sans-serif;

}