<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#tipDiv{
position:absolute;
left:512px;
top:582px;
width:191px;
height:91px;
z-index:3;
display:none;
background-color: #FF9933;
}
#tipLayer {
position:absolute;
width:167px;
height:94px;
left:50px;
top:50px;
z-index:1;
background-color: #33FF99;
border:solid;
border-width:thin;
padding:10px;
border-color:a;
width:300px;
height:200px;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 132px;
top: 36px;
}
</style>
<script type="text/javascript" language="javascript">
function checkTr(){
var td = event.target; // 通过event.srcElement 获取激活事件的对象 td
alert("行号：" + (td.parentElement.rowIndex + 1) + "，内容：" + td.innerText);
var tab = document.getElementById("test") ;
//表格行数
var rows = tab.rows.length ;
//表格列数
var cells = tab.rows.item(0).cells.length ;
alert("行数"+rows+"列数"+cells);
}
var removeTime;
window.onload = function(){
document.getElementById("test").onclick=function(evt){
test(evt);
}
}
function test(evt){
removeDiv();
//alert(document.body.clientWidth);
//alert(document.body.clientHeight);
//alert(document.documentElement.clientWidth);
//alert(document.documentElement.clientHeight);
window.clearTimeout(removeTime) ;//清除计时器
//动态创建div
var testDiv=document.createElement("div");
testDiv.setAttribute("id","tipLayer");
testDiv.setAttribute("position","absolute");
testDiv.innerHTML="撒打扫打扫打扫打扫打扫";
if(evt==null){
evt=window.event;
}
var obj=evt.srcElement?evt.srcElement:evt.target
testDiv.style.left=evt.layerX+"px";
testDiv.style.top= evt.layerY+"px";
//testDiv.style.left=document.documentElement.scrollLeft+obj.pageX;
//testDiv.style.top=document.documentElement.scrollTop+obj.clientY;
testDiv.style.width="200px";
testDiv.style.height="200px";
testDiv.style.cursor="pointer";
testDiv.style.color="red";
testDiv.setAttribute("background-color","blue");
document.body.appendChild(testDiv);
removeTime=setTimeout("removeDiv()",3000);//3秒
}
//移除div的方法
function removeDiv(){
if(document.getElementById("tipLayer")!=null){
var divobj=document.getElementById("tipLayer");
divobj.parentNode.removeChild(divobj);
}
}
function browserType() { //判断浏览器类型
if (navigator.userAgent.indexOf("MSIE") > 0) {
return 'IE';
} else if (navigator.userAgent.indexOf("Firefox") > 0) {
return 'FF';
} else if (navigator.userAgent.indexOf("Safari") > 0) {
return 'SF';
}
}
</script>
</head>
<body>
<div id="Layer1">
<div align="center" >sdsdsdsd</div>
</div>
<div style="left:200px; top:200; background-color:#CC3399; background-color:#66CC99; border:#000066; border:solid; border-width:thin; border:#336633; padding:1px">xxxxxxxxxxxxxxxxxxxxx</div>
<table id="test" name="tab" border="1" width="4000px">
<TR>
<td>张三</td>
<td>16</td>
</TR>
<TR>
<td>李四</td>
<td>17</td>
</TR>
<TR>
<td>王五</td>
<td>18</td>
</TR>
<TR>
<td>张三</td>
<td>16</td>
</TR>
<TR>
<td>李四</td>
<td>17</td>
</TR>
<TR>
<td>王五</td>
<td>18</td>
</TR>
<TR>
<td>张三</td>
<td>16</td>
</TR>
<TR>
<td>李四</td>
<td>17</td>
</TR>
<TR>
<td>王五</td>
<td>18</td>
</TR>
<TR>
<td>张三</td>
<td>16</td>
</TR>
<TR>
<td>李四</td>
<td>17</td>
</TR>
<TR>
<td>王五</td>
<td>18</td>
</TR>
</table>
</body>
</html>
分享到：
相关推荐
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示，可以根据窗口的大小自动调节所显示的大小！ DIV+CSS+JS静态分页程序可兼容主流浏览器（IE、FF、Opera） DIV+CSS表格...
原来的网站是TABLE搭建的，现在选择网页，轻松按下按钮，一个全新的DIV+CSS网页重新构建完成了。 Table2CSS是一款可以将表格布局网页完美转换成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 这个...
微软的IEDevToolBar，这是一个免费的专门为Web开发人员制作的IE插件，IE插件IEDevToolBar可以帮助我们分析网站的布局结构，有助于我们学习和分析页面的CSS，其主要功能有： 1.以树结构查看CodeDom，并查看每个...
论文详细论述了一个基于公司网站的开发的设计过程。在技术上，采用了 Dreamweaver网站开发工具，以 HTML的超大功能结合 JAVAScript 的客户端语言，并加以 FLASH 等动画以增加网站的动态效果。这样的构造有利于以后...
4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...
网页_创建新网页 说明：直接在Webbroswer或IES内写入一个完整的网页，创建前必须保证网页已打开 网页_读取Cookie 说明：成功返回当前网页的Cookie 网页_高亮关键字 说明：高亮网页上指定的关键字 网页_解除网页...
实验一 HTML编程基础 （1）做一个表格 3行 4列 内容不限 （2）创建一个表单 行按照20%和80%划分frameset 实验二 Javascript编程基础 函数应用 1 要求输出到document对象 使用switch 实现接收输入成绩等级反馈 并统计...
程序描述：本章模仿Google ig，使用Ajax技术实现一个个性化主页系统。通过拖拽方式设置主页，当完成拖拽窗口时，自动保存布局，使用户可以随时根据喜好来设置布局。 /login.jsp 登录页面 /homepage.jsp ...
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
该程序能够实现鼠标滑过使图片变大的功能。网上好多类似程序都是用纯div实现的，该程序适合习惯使用表格的程序员。比较简单明了。
图２（8） 利用Ctrl＋*选取文本如果一个工作表中有很多数据表格时，可以通过选定表格中某个单元格，然后按下Ctrl＋*键可选定整个表格。Ctrl＋*选定的区域为：根据选定单元格向四周辐射所涉及到的有数据单元格的最大...
0237 如何实现一个应用程序只能打开一个进程 158 7.4 其他数据处理技术 159 0238 对计算结果四舍五入 159 0239 获取一个字符的ASCII值 159 0240 判断字符串中是否有文字符 160 0241 如何从字符串中提取...
1、创建一个 div 标记 ，增加属性 ，设置 align 属性的值为 center ，设置 id 属性的值为 container，设置 title 属性的值为 这是一个div <div align="center" id="container" title="这是一个div"></div> 四大...
Insert All Files 这对于网站管理来说是一个很酷的工具，它可以在一张表格中列出您网站所有的文件名，小心，如果您网站文件太多的话，它会让您的DREAMWEAVER疯赶掉！ Import Fireworks 对于您手中的FIREWORKS来说这...
本次WxBBS的更新主要集中在核心方面，WxBBS 7.8.0已经是一个相当优秀的论坛核心，新版本凸显“论坛”这一关键字眼，去粗取精，简化界面，优化甚至重写了大部分代码，希望这个脱胎换骨的程序能带给你新的使用体验，...
实例047 同一个页面中的多表单提交 66 实例048 获取表单中提交的所有数据 68 实例049 以文件域的形式显示数据信息 70 第3章 CSS与JavaScript脚本的应用 73 3.1 文字特效 74 实例050 逐个闪烁的文字 74 ...
婚庆公司着重点在于婚礼本身，会场布置着重点在场景的布置，婚礼大于会场布置，一场好的时尚个性婚礼婚礼，会场布置是为婚礼服务的，它是为了更好地表达婚礼而设置的一个元素，正如一场电影为表达主题而设置的周围...
修改高级表格支持库，在双击单元格进入编辑状态后，不能收到第一个“字符输入”事件的BUG。 2. OpenGL支持库中的部分英文名称常量已改为中文，并统一在所有常量名称之前加前缀“GL_”，以减少与其它库的冲突机率。...
编写时，参考了一个同样是自己编的类似程序。 可惜最终没用上。 程序很简单，基本没有美化界面，连布局都是用表格+CSS。 开头我也想弄好点，比如，页面采用DIV+CSS、加个web编辑器、再加更多更多的功能、再检查...