JS悬浮窗口如何实现

JavaScript012

JS悬浮窗口如何实现,第1张

jsp中：

<body>

<div style="position: absolutez-index:90" id="div1">我不动</div>

<div>我动<div>

</body>

//有的将position设置成fixed,我试了试效果不如position好,设置z-index，向里的深度，我这儿设置90，你要覆盖几个div，设置数大于那个数就行。

js中：

我这儿用jquery写。

$(document).ready(function(){

$(window).scroll(function(){//滚动时触发函数

$("#div1").css("top",$(document).scrollTop())//将滚动条高度赋给悬浮框。

})

})

导入jquery库，效果就出来了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>New Document </title>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<meta name="Author" content="笃行天下">

<meta name="Keywords" content="笃行天下">

<meta name="Description" content=" http://hi.baidu.com/duxing">

</head><body>

<input type=button value='左滚' onmouseover="leftRoll()" onmouseout="stopRoll()">

<marquee id="dodoRoll" width="30%">笃行天下_笃行天下_笃行天下_笃行天下_笃行天下</marquee>

<input type=button value='右滚' onmouseover="rightRoll()" onmouseout="stopRoll()"></body>

</html>

<script language="JavaScript">

<!--

document.getElementById("dodoRoll").stop()

function leftRoll()

{

document.getElementById("dodoRoll").direction="left"

document.getElementById("dodoRoll").start()

} function rightRoll()

{

document.getElementById("dodoRoll").direction="right"

document.getElementById("dodoRoll").start()

} function stopRoll()

{

document.getElementById("dodoRoll").stop()

}

//-->

</script>