您的位置：首页 > 编程语言 > Java开发

JavaScrip——练习(做悬浮框)

2015-12-27 00:37 393 查看

通过HTML、CSS、JSP来实现

1、首先确定通过div嵌套来实现：

大的div里放默认显示的一层，限制其总层次高，设置超出部分隐藏

小的div里放鼠标移过去时显示的一层：3行1列的表格

1.1、什么场景的实现通过在单元格内的嵌套div实现

2.通过CSS来设置div和table的样式

3.通过JSP来设置方法：onmouseover时显示全部内容

onmouseout时只显示大的一层

4.通过id来调用样式，通过事件来调用方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"> // 放在head里
*
{
margin:0px;
padding:0px;}
#aa
{
height: 40px;
width: 90px;
top: 50px;
left: 200px;
background-color:#CCC;
position: absolute;
overflow: hidden;
text-align: center;
line-height: 40px;
}
#bb
{
height:120px;
width:90px;
top:40px;
left:0px;
background-color:#CCC;
position:absolute;
}
table //直接写table 不是#table
{
border:0px solid #CCC;
height:120px;
width:90px;
text-align:center;
vertical-align:middle;
}

#changjing
{
height:40px;
width:100px;
top:0px;
left:0px;
position:absolute;
overflow:hidden;
}
#fen
{
background-color:#C9F;
height:40px;
width:100px;
top:0px;
left:100px;
position:absolute;

}

</style>
</head>

<body>
<div id="aa" onmouseover="over()" onmouseout="out()">新闻动态 /*修改层的颜色要在这里面的style修改*/

<div id="bb">
<table cellpadding="0" cellspacing="0">

<tr><td>活动</td></tr>
<tr><td>杂谈</td></tr>
</table>
</div></div>
</body>
</html>
<script>
function over()
{
var a=document.getElementById("aa");
a.setAttribute("style","overflow:visible;background-color:#3FC");
}
function out()
{
var a=document.getElementById("aa");
a.setAttribute("style",
"overflow:hidden;background-color:#CCC");
}

function over1()
{
var a=document.getElementById("changjing");
a.setAttribute("style","overflow:visible;background-color:#3FC");
}
function out1()
{
var a=document.getElementById("changjing");
a.setAttribute("style",
"overflow:hidden;background-color:#CCC");
}

</script>

默认时：

鼠标在上面时：

鼠标点击场景

鼠标移开时

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航