通过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 height="40" width="100">
<div id="changjing" onmouseover="over1()" onmouseout="out1()">场景<div id="fen">什么场景</div></div>
</td>

</tr>

<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>

默认时：

鼠标在上面时：

鼠标点击场景

鼠标移开时

JavaScrip——练习(做悬浮框)的更多相关文章

  1. JavaScrip——练习(做悬浮框再进一步：悬浮窗后缀悬浮窗——用this.className)

    对悬浮窗进一步改进: 用this.className 可以省略script <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  2. JavaScrip——练习(做悬浮框进一步：悬浮窗后缀悬浮窗【感觉这种方法比较麻烦】)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框

    问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...

  4. C# 鼠标悬停在datagridview的某单元格，显示悬浮框效果

    今天在做项目时,看到一软件做的悬浮框效果不错,从网上搜罗了一些资料,未见到有十分好的解决办法,只能自已动手,利用datagridview 的ToolTipText 来达到此效果. 以下是我简单实现的代 ...

  5. Android音视频通话过程中最小化成悬浮框的实现（类似Android8.0画中画效果）

    关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方 ...

  6. Android悬浮框，在Service中打开悬浮窗；在Service中打开Dialog；

    文章介绍了如何在Service中显示悬浮框,在Service中弹出Dialog,在Service中做耗时的轮询操作: 背景需求: 公司的项目现在的逻辑是这样的:发送一个指令,然后3秒一次轮询去查询这个 ...

  7. 菜鸟学JS（三）——自动隐藏的悬浮框

    今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...

  8. Echarts 的悬浮框tooltip显示自定义格式化

    最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...

  9. （41）JS运动之右側中间悬浮框（对联悬浮框）

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. MySQL-关于并发下的mysql_insert_id()

    我们在写数据库程序的时候, 经常会需要获取某个表中的最大序号数, 或者刚插入的数据的ID值, 一般情况下获取刚插入的数据的id, 使用select max(id) from table 是可以的, 但 ...

  2. jquery serialize对json的包装用法

    jquery对象.serialize()  可以多用于表单对数据封装提交 能够收表参数,形成一个json格式字符串, 前提是:必须为每一个表单项取一个name属性 对元素 设置 name属性, 然后 ...

  3. HDUOJ --2566

    统计硬币 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. 可以尝试用Google Font API来摆脱网页字体的单调 仅仅抛砖引玉

    http://www.nowamagic.net/librarys/veda/detail/2513

  5. android自带theme

    在网上搜了一下,android自带theme如下: •android:theme="@android:style/Theme.Dialog"   将一个Activity显示为对话框 ...

  6. Template Method - 模板方法模式

    1.概述 在面向对象开发过程中,通常我们会遇到这样的一个问题:我们知道一个算法所需的关键步骤,并确定了这些步骤的执行顺序.但是某些步骤的具体实现是未知的,或者说某些步骤的实现与具体的环境相关.例子1: ...

  7. 如何恢复 Linux删除的文件

    原理及普通文件的恢复 要想恢复误删除的文件,必须清楚数据在磁盘上究竟是如何存储的,以及如何定位并恢复数据.本文从数据恢复的角度,着重介绍了 ext2 文件系统中使用的一些基本概念和重要数据结构,并通过 ...

  8. Python atan() 函数

    描述 atan() 返回x的反正切弧度值. 语法 以下是 atan() 方法的语法: import math math.atan(x) 注意:atan()是不能直接访问的,需要导入 math 模块,然 ...

  9. Pandas dataframe 与 Spark dataframe 的区别

    区别 :http://www.voidcn.com/article/p-wsqbotem-boa.html 获取列名的列表: DataFrame.columns.values.tolist()

  10. EF 多线程TransactionScope事务异常"事务EFTransaction类定义：与另一个进程被死锁在 锁 资源上，并且已被选作死锁牺牲品。请重新运行该事务。"

    解决方案代码一:使用lock锁定 //对于锁推荐使用静态私有静态变量 private readonly static object _MyLock = new object(); /// <su ...