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控制其大小. 今天 ...
随机推荐
- 2017年WorkApplication牛客网线上机试题
WorkApplication是一家日企,主要办公地在东京.新加坡.上海等地. 第一题:n的全排列中有多少个排列逆序数为k 输入两个数字n,k,两个数字的范围都是[1,1000]. 输出:n的全排列中 ...
- xml2-config not found.
在Ubuntu下接着安装php时候,在configure后,又出现错误提示:error: xml2-config not found. Please check your libxml2 instal ...
- RMAN - 发现I/O瓶颈
大多数操作系统支持异步I/O. 备份到磁盘,异步I/O是一个优势,因为一个服务器进程同时可以执行多个I/O操作:同步I/O必须等上一个I/O操作完成才可以执行下一个I/O操作. 初始化参数disk_a ...
- OAF_OAF Framework常用函数汇总(概念)
2014-12-31 Created By BaoXinjian
- Nginx 的线程池与性能剖析【转载】
正如我们所知,NGINX采用了异步.事件驱动的方法来处理连接.这种处理方式无需(像使用传统架构的服务器一样)为每个请求创建额外的专用进程或者线程,而是在一个工作进程中处理多个连接和请求.为此,NGIN ...
- Creating the Help Page in ASP.NET Web API
Introduction In this article we will define the process of creating the help page in the ASP .NET We ...
- oracle ORA-00119和ORA-00132解决方法
ORA-00119 ORA-00132解决方法. 思路:*.local_listener错误导致.要*.local_listener就要修改spfile文件,因为oracle默认是以spfile文件启 ...
- springmvc+spring+mybatis+maven项目构建
1.首先在myeclipse10中安装maven的插件,将插件放入D:\Program Files (x86)\myEclipse10\MyEclipse Blue Edition 10\dropin ...
- [Jobdu] 题目1499:项目安排
题目描述: 小明每天都在开源社区上做项目,假设每天他都有很多项目可以选,其中每个项目都有一个开始时间和截止时间,假设做完每个项目后,拿到报酬都是不同的.由于小明马上就要硕士毕业了,面临着买房.买车.给 ...
- TCP通信的三次握手和四次撒手的详细流程(顿悟)
TCP(Transmission Control Protocol) 传输控制协议 三次握手 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 位码即tcp标志位 ...