JS悬浮窗口如何实现

JavaScript05

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库,效果就出来了。

具体如下:

这个小特效很不错,用链接改变网页背景色,鼠标放上链接文字上,网页背景就会跟着变换,想让你的主页更个性一点的朋友,这个代码一定能用上,其实你可在此基础上修改一下代码,改成鼠标放上文字切换样式表,这样整个网页就变了风格,是不是很实用?

运行效果截图如下:

具体代码如下:

<html>

<head>

<title>鼠标放上链接改变网页背景颜色</title>

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

<SCRIPT LANGUAGE="JavaScript">

function goHist(a)

{

history.go(a)

}

</script>

</head>

<body>

<center>

<h2>鼠标放到相应链接上看看!</h2>

<table border=1 borderlight=green style="border-collapse: collapse" cellpadding="5" cellspacing="0">

<tr><td align=center>

<a href="#" onMouseOver="document.bgColor='skyblue'">天空蓝</a>

<a href="#" onMouseOver="document.bgColor='red'">大红色</a>

<a href="#"onMouseOver="document.bgColor='#0066CC'">清新蓝</a>

</td></tr>

</table>

</center>

</body>

</html>