JavaScrip——练习(做悬浮框)
通过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——练习(做悬浮框)的更多相关文章
- JavaScrip——练习(做悬浮框再进一步：悬浮窗后缀悬浮窗——用this.className)
对悬浮窗进一步改进: 用this.className 可以省略script <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- JavaScrip——练习(做悬浮框进一步：悬浮窗后缀悬浮窗【感觉这种方法比较麻烦】)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框
问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
- C# 鼠标悬停在datagridview的某单元格，显示悬浮框效果
今天在做项目时,看到一软件做的悬浮框效果不错,从网上搜罗了一些资料,未见到有十分好的解决办法,只能自已动手,利用datagridview 的ToolTipText 来达到此效果. 以下是我简单实现的代 ...
- Android音视频通话过程中最小化成悬浮框的实现（类似Android8.0画中画效果）
关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方 ...
- Android悬浮框，在Service中打开悬浮窗；在Service中打开Dialog；
文章介绍了如何在Service中显示悬浮框,在Service中弹出Dialog,在Service中做耗时的轮询操作: 背景需求: 公司的项目现在的逻辑是这样的:发送一个指令,然后3秒一次轮询去查询这个 ...
- 菜鸟学JS（三）——自动隐藏的悬浮框
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...
- Echarts 的悬浮框tooltip显示自定义格式化
最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...
- （41）JS运动之右側中间悬浮框（对联悬浮框）
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 在python中使用静态方法staticmethod
静态方法: 静态方法是类中的函数,不需要实例.静态方法主要是用来存放逻辑性的代码,主要是一些逻辑属于类,但是和类本身没有交互,即在静态方法中,不会涉及到类中的方法和属性的操作.可以理解为将静态方法存在 ...
- 更改 pandas dataframe 中两列的位置
更改 pandas dataframe 中两列的位置: 把其中的某列移到第一列的位置. 原来的 df 是: df = pd.read_csv('I:/Papers/consumer/codeandpa ...
- iOS10 推送必看 UNNotificationContentExtension
来源:徐不同(@2016徐小爷) 链接:http://www.jianshu.com/p/45933f5450a4 大伙久等啦~这绝对是最全最详细的 UNNotificationContentExte ...
- duplicate files during packaging of apk
OSChina Android APP 导入到Android Studio中不能运行,发现一小插曲. 主要实现了开源中国社区 OSC Android 客户端项目源码通过Gradle方式编译 在 And ...
- Shell习题100例（2）
找文件差异 grep -f 选项可以匹配到文件a在文件b中所有相关的行(取a中有b中有的) [root@centos-04 tmp]# vim b.txt vvvv root [root@centos ...
- Python 字典 pop() 方法
描述 Python 字典 pop() 方法删除给定键所对应的键/值对,并返回被删除的值.给定键如果不在字典中,则必须设置一个default值,否则会报错,此时返回的就是default值. 语法 pop ...
- Spring Boot返回json数据及完美使用FastJson解析Json数据
Spring Boot返回json数据 视频地址:http://www.iqiyi.com/w_19rubxzsr5.html 博文参考:https://blog.csdn.net/linxingl ...
- 关于 Chrome Console 查看DOM详情细节的奇思淫巧
我们期待打印出的dom效果如下: 但某些时候,打印出来,或者通过$0.$1.document.getElementById('####') 等方式打印出来的效果如下: 根据第一幅图我们不难看出,当打印 ...
- 【JEECG_3.7.1】列表多表头的设计
先看下多表头的设计: 在这个多表头的表单当中,我们可以按照从上到下和从左往右的划分方式,将表头划分成三行十列,分别是: 列表标签 人员信息.部门信息.工资.入职状态.创建日期.操作 名称.年龄.性别. ...
- Leaf——美团点评分布式ID生成系统
背景 在复杂分布式系统中,往往需要对大量的数据和消息进行唯一标识.如在美团点评的金融.支付.餐饮.酒店.猫眼电影等产品的系统中,数据日渐增长,对数据分库分表后需要有一个唯一ID来标识一条数据或消息,数 ...