JavaScrip——练习(做悬浮框进一步：悬浮窗后缀悬浮窗【感觉这种方法比较麻烦】)
<!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">
*{
margin:0px;
padding:0px;
}
#aa
{
background-color:#FF0; height: 40px;
width: 100px;
top: 60px;
left: 100px;
position: absolute;
overflow: hidden;
text-align: center;
line-height:40px;
}
#bb{ height:120px;
width:100px;
top:40px;
left:0px;
position:absolute; }
table{ height:120px;
width:100px;
text-align:center;
vertical-align:middle;
}
#tiyu
{
height:40px;
width:100px;
position:absolute;
overflow:hidden;
left:0px;
top:0px;
}
#zuqiu
{
height:40px;
width:100px;
position:absolute;
left:100px;
top:0px;
background-color:#C63;
}
#yule
{
height:40px;
width:100px;
position:absolute;
overflow:hidden;
left:0px;
top:40px;
}
#bagua
{
height:40px;
width:100px;
position:absolute;
left:100px;
top:0px;
background-color:#C63;
}
#guoji
{
height:40px;
width:100px;
position:absolute;
overflow:hidden;
left:0px;
top:80px;
}
#junshi
{
height:40px;
width:100px;
position:absolute;
left:100px;
top:0px;
background-color:#C63;
}
</style>
</head> <body>
<div id="aa" onmousemove="over()" onmouseout="out()">新闻动态
<div id="bb">
<table cellpadding="0" cellspacing="0"> <tr bgcolor="#0000FF"> <td height="40" width="100"><div id="tiyu" onmouseover="over1()" onmouseout="out1()">体育<div id="zuqiu">足球</div></div></td> </tr> <tr bgcolor="#FFFF00">
<td height="40" width="100"><div id="yule" onmousemove="over2()" onmouseout="out2()">娱乐<div id="bagua">八卦</div></div></td> </tr> <tr bgcolor="#00FFFF">
<td height="40" width="100"><div id="guoji" onmouseover="over3()" onmouseout="out3()">国际新闻<div id="junshi">军事</div></div></td>
</tr>
</table> </div></div> </body>
</html>
<script>
function over()
{
var a=document.getElementById("aa")
a.setAttribute("style","overflow:visible;background-color:red");
}
function out()
{
var a=document.getElementById("aa")
a.setAttribute("style","overflow:hidden:background-color:green"
); }
function over1()
{
var a=document.getElementById("tiyu")
a.setAttribute("style","overflow:visible;background-color:red");
}
function out1()
{
var a=document.getElementById("tiyu")
a.setAttribute("style","overflow:hidden:background-color:green"
); }
function over2()
{
var a=document.getElementById("yule")
a.setAttribute("style","overflow:visible;background-color:red");
}
function out2()
{
var a=document.getElementById("yule")
a.setAttribute("style","overflow:hidden:background-color:green"
); }
function over3()
{
var a=document.getElementById("guoji")
a.setAttribute("style","overflow:visible;background-color:red");
}
function out3()
{
var a=document.getElementById("guoji")
a.setAttribute("style","overflow:hidden:background-color:green"
); } </script>
结果：
默认时：
鼠标在新闻动态上面时：
鼠标在体育上面时：
鼠标在娱乐上面时：
鼠标在国际新闻上面时
JavaScrip——练习(做悬浮框进一步：悬浮窗后缀悬浮窗【感觉这种方法比较麻烦】)的更多相关文章
- JavaScrip——练习(做悬浮框再进一步：悬浮窗后缀悬浮窗——用this.className)
对悬浮窗进一步改进: 用this.className 可以省略script <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- JavaScrip——练习(做悬浮框)
通过HTML.CSS.JSP来实现 1.首先确定通过div嵌套来实现: 大的div里放默认显示的一层,限制其总层次高,设置超出部分隐藏 小的div里放鼠标移过去时显示的一层:3行1列的表格 1.1.什 ...
- Android悬浮框，在Service中打开悬浮窗；在Service中打开Dialog；
文章介绍了如何在Service中显示悬浮框,在Service中弹出Dialog,在Service中做耗时的轮询操作: 背景需求: 公司的项目现在的逻辑是这样的:发送一个指令,然后3秒一次轮询去查询这个 ...
- Android音视频通话过程中最小化成悬浮框的实现（类似Android8.0画中画效果）
关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方 ...
- 小米Adnroid默认禁止悬浮框的使用，导致开发的悬浮框无法接收事件
比如你建了一个悬浮框: WindowManager windowManager = getWindowManager(context); int screenWidth = windowManager ...
- Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框
问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
- C# 鼠标悬停在datagridview的某单元格，显示悬浮框效果
今天在做项目时,看到一软件做的悬浮框效果不错,从网上搜罗了一些资料,未见到有十分好的解决办法,只能自已动手,利用datagridview 的ToolTipText 来达到此效果. 以下是我简单实现的代 ...
- Android -- 使用WindowManager实现悬浮框效果
1,原文在这里http://blog.csdn.net/qq_17250009/article/details/52908791,我只是把里面的关键步骤给注释了一下,首先来看一下我们的效果,如图(电脑 ...
- 菜鸟学JS（三）——自动隐藏的悬浮框
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...
随机推荐
- eclipse 在Servers窗口创建一个Tomcat 6.0 Server失败
web项目部署到tomcat除了用eclipse插件,eclipse也有一个Servers窗口来部署. 问题背景:Servers窗口,我之前创建过一个Tomcat v6.0 Server,后来我把 ...
- 在Android 开发中使用 SQLite 数据库笔记
SQLite 介绍 SQLite 一个非常流行的嵌入式数据库,它支持 SQL 语言,并且只利用很少的内存就有很好的性能.此外它还是开源的,任何人都可以使用它.许多开源项目((Mozilla, PH ...
- Linux命令-文件系统常用命令：df,du,fsck,dumpe2fs
df -h 人性化显示文件系统的分区信息 注意:在linux中目录也是文件,不要混淆下面的目录文件说法. 传统方式查看文件大小可以使用:ll -h /目录/文件名,就可以看到文件的大小,但是如果你想看 ...
- C#中?和:?和??总结
?代表可空类型修饰符 引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.为了使值类型也可为空,就可以使用可空类型?:三元表达式 int a=b>c?b:c 如果b大 ...
- 转 web前端性能分析--分析篇
通过具体实施后就可以获得第一手的web前端性能的数据了,然后每次新版本都跑,这就会获得大量的数据,为性能分析提供了基础的输入,同时应该还要综合使用多种工具去从不同的方向收集数据:比如showslow同 ...
- 基于配置的Spring MVC3
网上查找的spring mvc3大部分都是基于注射的方式,总感觉注射有点怪怪.不利于后期扩展和项目管理,于是特意写下这篇基于xml配置的Spring MVC3.以供大家參考. 怎么建立web项目和下载 ...
- Scanner类nextInt方法的使用注意点
一.先看一段正常的代码 1. 一段用Scanner捕获键盘输入的代码: Scanner sc = new Scanner(System.in); // 先读取键盘输入的字符串 System.out.p ...
- MPU6050读取FIFI数据时mpu_dmp_get_data的返回值一直是1
试验中发现:不断进行循环读fiffo就可以得到正常数据.形如这样 );//返回值:0,DMP成功解出欧拉角 printf("pitch=%f\troll=%f\tyaw=%f\r\n&quo ...
- Securecrt emacs/vi 代码无法高亮、无颜色
无法高亮: 这是因为.bashrc中没有 export term=linux 最后,代码恢复正常:
- kernel生成针对x86架构的tags和cscope数据库
最近下载了kernel的最新源码4.15版,但下载后的linux内核不仅包含了x86架构的函数还包含了如:arm.powerPC等等其他架构的函数,如果直接生成tags文件,将来查找时,多种架构的同名 ...