如何让鼠标经过这个网页中的div层时自动打开?
实例网页:<!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>
<link href="JMenuTabRes3/JMenuTab.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="JMenuTabRes3/JMenuTab.js"></script>
<style type="text/css">
<!--
#right { border:2px
width:100px;
height:300px;
position:absolute;
right:8px;
top:0px;
}
.STYLE1 {font-size: 12px}
-->
</style>
</head><body>
<div id="page"><!--33资料-->
<center>
</center></div>
<div id="page1"><!--2资料-->
<center>
</center>
</div>
<div id="page2">Help!Help!</div>
<div id="page3"><!--1资料-->
<center>
</center>
</div>
<div id="page4">Help!Help!</div>
<div id="page5">Help!Help!</div>
</body>
</html>
<script language="javascript" type="text/javascript">
var menuTab = new JMenuTab(null,null,"menuBar");
menuTab.create();
menuTab.setSkin("JMenuTabBlue");
menuTab.addTab("4资料","page");
menuTab.addTab("3资料","page1");
menuTab.addTab("员工信息","page2");
menuTab.addTab("1资料","page3");
menuTab.addTab("2结管理","page4");
menuTab.addTab("1资料","page5");
menuTab.setActiveTab(2);
</script>
</script>
实例网页:<!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>
<link href="JMenuTabRes3/JMenuTab.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="JMenuTabRes3/JMenuTab.js"></script>
<style type="text/css">
<!--
#right { border:2px
width:100px;
height:300px;
position:absolute;
right:8px;
top:0px;
}
.STYLE1 {font-size: 12px}
-->
</style>
</head><body>
<div id="page"><!--33资料-->
<center>
</center></div>
<div id="page1"><!--2资料-->
<center>
</center>
</div>
<div id="page2">Help!Help!</div>
<div id="page3"><!--1资料-->
<center>
</center>
</div>
<div id="page4">Help!Help!</div>
<div id="page5">Help!Help!</div>
</body>
</html>
<script language="javascript" type="text/javascript">
var menuTab = new JMenuTab(null,null,"menuBar");
menuTab.create();
menuTab.setSkin("JMenuTabBlue");
menuTab.addTab("4资料","page");
menuTab.addTab("3资料","page1");
menuTab.addTab("员工信息","page2");
menuTab.addTab("1资料","page3");
menuTab.addTab("2结管理","page4");
menuTab.addTab("1资料","page5");
menuTab.setActiveTab(2);
</script>
</script>
var self = this;
var width = pWidth || "100%";
var height = pHeight;
this.titleHeight = 24;
var oOutline = null;
var oTitleOutline = null;
var oPageOutline = null;
var oTitleArea = null;
var oPageArea = null;
var tabArray = new Array();
this.activedTab = null;
this.onTabChange = new Function();
var $ = function(pObjId){
return document.getElementById(pObjId);
}
var body = $(pBody) || document.body;
var htmlObject = function(pTagName){
return document.createElement(pTagName);
}
var isRate = function(pRateString){
if(!isNaN(pRateString)) return false;
if(pRateString.substr(pRateString.length-1,1) != "%")
return false;
if(isNaN(pRateString.substring(0,pRateString.length - 1)))
return false;
return true;
}
var createOutline = function(){
var width_ = isRate(width) ? width : (!isNaN(width) ? width + "px" : "100%");
oOutline = htmlObject("DIV");
body.appendChild(oOutline);
oOutline.style.width = width_;
}
var createTitleOutline = function(){
oTitleOutline = htmlObject("DIV");
oOutline.appendChild(oTitleOutline);
oTitleOutline.className = "oTitleOutline";
var vTable = htmlObject("TABLE");
oTitleOutline.appendChild(vTable);
vTable.width = "60%";
vTable.border = 0;
vTable.cellSpacing = 0;
vTable.cellPadding = 0;
vTable.align="center";
var vTBody = htmlObject("TBODY");
vTable.appendChild(vTBody);
var vTr1 = htmlObject("TR");
vTBody.appendChild(vTr1);
var vTdTopLeft = htmlObject("TD");
vTr1.appendChild(vTdTopLeft);
vTdTopLeft.height = self.titleHeight;
vTdTopLeft.className = "oTopLeft";
oTitleArea = htmlObject("TD");
vTr1.appendChild(oTitleArea);
oTitleArea.className = "oTitleArea";
var vTdTopRight = htmlObject("TD");
vTr1.appendChild(vTdTopRight);
vTdTopRight.className = "oTopRight";
}
this.setTitleHeight = function(pHeight){
}
var tabBtn_click = function(){
self.setActiveTab(this.index);
}
var tabBtn_mouseover = function(){
if(this.className =="oTabBtnActive")
return;
this.className = "oTabBtnHover";
}
var tabBtn_mouseout = function(){
if(this.className =="oTabBtnActive")
return;
this.className = "oTabBtn";
}
var createTabBtn = function(pLabel,pTabPage){
var vTabBtn = htmlObject("DIV");
oTitleArea.appendChild(vTabBtn);
vTabBtn.className = "oTabBtn";
//////////////////////////////////
vTabBtn.index = tabArray.length;
vTabBtn.label = pLabel;
vTabBtn.tabPage = pTabPage;
//////////////////////////////////
vTabBtn.onclick = tabBtn_click;
vTabBtn.onmouseover = tabBtn_mouseover;
vTabBtn.onmouseout = tabBtn_mouseout;
tabArray.push(vTabBtn);
var vTabBtnL = htmlObject("DIV");
vTabBtn.appendChild(vTabBtnL);
vTabBtnL.className = "oTabBtnLeft";
vTabBtnC = htmlObject("DIV");
vTabBtn.appendChild(vTabBtnC);
vTabBtnC.className = "oTabBtnCenter";
vTabBtnC.innerHTML = pLabel;
vTabBtnR = htmlObject("DIV");
vTabBtn.appendChild(vTabBtnR);
vTabBtnR.className = "oTabBtnRight";
}
var createPageOutline = function(){
oPageOutline = htmlObject("DIV");
oOutline.appendChild(oPageOutline);
oPageOutline.className = "oPageOutline";
var vTable = htmlObject("TABLE");
oPageOutline.appendChild(vTable);
vTable.width = "60%";
vTable.border = 0;
vTable.cellSpacing = 0;
vTable.cellPadding = 0;
vTable.style.borderCollapse = "collapse";
vTable.style.tableLayout="fixed";
vTable.align="center";
var vTBody = htmlObject("TBODY");
vTable.appendChild(vTBody);
var vTr1 = htmlObject("TR");
vTBody.appendChild(vTr1);
var vTdBottomLeft = htmlObject("TD");
vTr1.appendChild(vTdBottomLeft);
vTdBottomLeft.className = "oBottomLeft";
vTdBottomLeft.rowSpan = 2;
oPageArea = htmlObject("TD");
vTr1.appendChild(oPageArea);
oPageArea.className = "oPageArea";
if(oPageArea.filters)
oPageArea.style.cssText = "FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward');";
oPageArea.height = 10;
var vTdBottomRight = htmlObject("TD");
vTr1.appendChild(vTdBottomRight);
vTdBottomRight.className = "oBottomRight";
vTdBottomRight.rowSpan = 2;
var vTr2 = htmlObject("TR");
vTBody.appendChild(vTr2);
var vTdBottomCenter = htmlObject("TD");
vTr2.appendChild(vTdBottomCenter);
vTdBottomCenter.className = "oBottomCenter";
}
this.addTab = function (pLabel,pPageBodyId){
createTabBtn(pLabel,pPageBodyId);
if($(pPageBodyId)){
oPageArea.appendChild($(pPageBodyId));
$(pPageBodyId).style.display = "none";
}
}
this.setActiveTab = function(pIndex){
if(oPageArea.filters)
oPageArea.filters[0.apply();
if(self.activedTab != null){
self.activedTab.className = "oTabBtn";
if($(self.activedTab.tabPage))
$(self.activedTab.tabPage).style.display = "none";
}
var oldTab = self.activedTab;
self.activedTab = tabArray[pIndex];
self.onTabChange(oldTab,self.activedTab);//自定义事件,两个参数分别是先前的活动页签和现在活动的页签的index。
self.activedTab.className = "oTabBtnActive";
if($(self.activedTab.tabPage))
$(self.activedTab.tabPage).style.display = "";
if(oPageArea.filters)
oPageArea.filters[0].play(duration=1);
};
this.create = function(){
createOutline();
createTitleOutline();
createPageOutline();
}
}[/code]
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}
#JMenuTabBlue .oInnerline {
background-color: #FFFFFF;
}
#JMenuTabBlue .oTitleOutline {
height: 24px;
color: #FFFFFF;
overflow:hidden;
}#JMenuTabBlue .oTitleOutline .oTopLeft {
width:3px;
background-image: url(left.gif);
background-repeat: no-repeat;
}
#JMenuTabBlue .oTitleOutline .oTitleArea {
background-image: url(mid.gif);
}
#JMenuTabBlue .oTitleOutline .oTopRight {
width:3px;
background-image: url(right.gif);
background-repeat: no-repeat;
}
/*--------------------------------------------*/
#JMenuTabBlue .oTabBtn {
float: left;
padding-left: 3px;
padding-right: 3px;
margin-left: 2px;
cursor: pointer;
}
#JMenuTabBlue .oTabBtn a{
text-decoration:none;
color: #FFFFFF;
}
#JMenuTabBlue .oTabBtn .oTabBtnLeft{
float:left;
}
#JMenuTabBlue .oTabBtn .oTabBtnCenter{
line-height:24px;
float:left;
}
#JMenuTabBlue .oTabBtn .oTabBtnRight{
float:left;
}/*------------------------------------------*/#JMenuTabBlue .oTabBtnActive {
float: left;
height: 24px;
}#JMenuTabBlue .oTabBtnActive a{
text-decoration:none;
color:#666666;
}#JMenuTabBlue .oTabBtnActive .oTabBtnRight {
background-image: url(activeRight.gif);
float: left;
height: 100%;
width: 3px;
}
#JMenuTabBlue .oTabBtnActive .oTabBtnLeft {
background-image: url(activeLeft.gif);
background-repeat: no-repeat;
float: left;
width: 3px;
height:100%;
}
#JMenuTabBlue .oTabBtnActive .oTabBtnCenter {
background-image: url(activeMid.gif);
float:left;
height:100%;
color: #666666;
line-height:24px;
padding-left:3px;
padding-right:3px;
cursor:pointer;
}/*-----------------------------------*/
#JMenuTabBlue .oTabBtnHover {
float: left;
padding-left: 3px;
padding-right: 3px;
margin-left: 2px;
cursor: pointer;
}
#JMenuTabBlue .oTabBtnHover a{
text-decoration:none;
color:#FF9900;
}
#JMenuTabBlue .oTabBtnHover .oTabBtnLeft{
float:left;
}
#JMenuTabBlue .oTabBtnHover .oTabBtnCenter{
line-height:24px;
float:left;
}
#JMenuTabBlue .oTabBtnHover .oTabBtnRight{
float:left;
}
/*------------------------------------*/#JMenuTabBlue .oPageOutline .oBottomLeft {
background-image: url(bottomLeft.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 3px;
}
#JMenuTabBlue .oPageOutline .oPageArea {
background-image: url(bottomMid.gif);
background-repeat: repeat-x;
padding:10px 10px 5px 10px;
}
#JMenuTabBlue .oPageOutline .oBottomRight {
background-image: url(bottomRight.gif);
background-repeat: no-repeat;
background-position: right bottom;
width: 3px;
}
#JMenuTabBlue .oPageOutline .oBottomCenter {
background-image: url(bottomMid.gif);
background-repeat: repeat-x;
background-position: bottom;
height: 3px;
}
你是想收缩 与 展示 div么?这无怪乎就是offsetHeight的改变 写一个函数处理0-最大值/最大值-0 不就可以伸展了?
如果只是鼠标经过就显示出来 你控制css visibility:visible/hidden 就可以了
如果你是display的 那么你需要有一个存在的父元素
事件 onmouseover onmouseout onmousemove