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> ...
随机推荐
- MyBatis JdbcType 与Oracle、MySql数据类型对应关系详解
本文转自:http://blog.csdn.net/loongshawn/article/details/50496460 1. Mybatis JdbcType与Oracle.MySql数据类型对应 ...
- Linux 通过cron定期执行 php文件(转)
Linux 通过cron定期执行 php文件 补充几点: 1. 要在php文件头加上解释器的路径,通常是 #!/usr/bin/php 2. 授予要执行的php文件执行权限 chmod a+x x ...
- SQL Server 数据库表的统计信息的更新
最近在调整基础信息数据时,新增了几个客户类型,意想不到的事情发生了,在使用新增的客户类型作为 查询条件查询报表时,居然出现了超时的现象,但是用其他以前的客户类型查询就没有问题,用一个 ...
- Asp.Net Core 轻松学-一行代码搞定文件上传 JSONHelper
Asp.Net Core 轻松学-一行代码搞定文件上传 前言 在 Web 应用程序开发过程中,总是无法避免涉及到文件上传,这次我们来聊一聊怎么去实现一个简单方便可复用文件上传功能:通过创建 ...
- JMeter UI 启动时报错
Problem After running jmeter.bat command under Windows 7 with cmd the following error is produced:W ...
- AVL平衡二叉搜索树原理及各项操作编程实现
C语言版 #include<stdio.h> #include "fatal.h" struct AvlNode; typedef struct AvlNode *Po ...
- mysql创建数据库和删除数据库
1.创建数据库 启动MySQL 服务之后,输入以下命令连接到MySQL 服务器: [mysql@db3 ~]$ mysql -uroot -p Enter password: Welcome to t ...
- 在ubuntu16.4中为pycharm创建桌面快捷启动方式
在ubuntu环境中每次使用pycharm需要到它的安装目录中执行./pycharm.sh来启动pycharm.比较麻烦,既然ubuntu提供了桌面环境我们应该从分利用.哈哈哈... 上干货 我的py ...
- NAS、SAN和DAS的区别
目前磁盘存储市场上,存储分类(如下表一)根据服务器类型分为:封闭系统的存储和开放系统的存储,封闭系统主要指大型机,AS400等服务器,开放系统指基于包括Windows.UNIX.Linux等操作系统的 ...
- C++ 链接Mysql 函数介绍
通过MySQL自己的API函数进行连接 1.使用API的方式连接,需要加载mysql的头文件和lib文件.在VS2010的附加包含目录中添加\MySQL\MySQL Server 5.1\includ ...