求一JAVAscript效果,层的显示与隐藏!!!!!!!!!!!!!!

div.style.display='block';
div.style.display='none';

浮动层的例子很多.http://vip.pastein.net/kanke/natineprince/ro/ItemForTask/ItemForTask.html我这里做的,只要把触发事件分别改为控件的onclick和body的onclick应该就是你想要的了.

一个完整的例子，模仿163日历？<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>TEST</title>
</head>
<style type="text/css">
body,td,div,a:link,a:visited{font-family:verdana; font-weight:bold; font-size:11px; color:#333333;}
a:hover,a:active{font-family:verdana; font-weight:bold; font-size:11px; color:#FF6600;}
</style>
<script language="javascript" type="text/javascript">
function sh(id,f) {
var flg=f;
var obj = document.getElementById(id);
if (flg=="open") obj.style.visibility = "visible";
if (flg=="close") obj.style.visibility = "hidden";
}
</script>
<body>
<table width="100%"  border="1">
  <tr>
    <td><a onMouseOver="javscript:sh('div01','open');" href="#">导航1显示</a></td>
    <td>导航2</td>
    <td>导航3</td>
    <td>导航4</td>
  </tr>
</table>
<div id="div01" style="background-color:#FF9900; visibility:hidden; width:400px; height:50px; font-family:Verdana; font-size:11px; border:3px solid red;" onMouseOver="this.style.visibility='visible';" onMouseOut="this.style.visibility='hidden';">
<p>DIV层的隐藏和显示...，</p>
</div></body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>

      <script>
     function test(){
     document.getElementById('grid').style.display=='block'?document.getElementById('grid').style.display='none':document.getElementById('grid').style.display='block';
     }

     </script>

   </head>
    <body>
          <a href="javascript: test()" >dddd</a>

     <div style="border: 1px solid red;width:500px;height:200px;display:none"
     id = "grid" >dddd</div>

    </body>
  </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css/css.css" />
<title>test</title>
<style type="text/css">

</style>
<script type="text/javascript">
  
  </script>
</head>
<body style="font-size:14px;">
<div style="overflow: hidden;">
  <p id="query">查询</p>
</div>
<div id="mbDIV" style="display: none;"></div>
<div id="loginDIV" style="top: 150px;left: 100px;display: none;width:90%;height:65%;border: 2px solid #71C6FF;padding:5px;">
  <div id="loginTopDIV">
    <center><img src="login_icon1.gif" />
      以下是XXX查询结果
    </center>
    <a href="#" id="close"><span class="close"><div style="float:left"><img src="close.gif" /></div><em style="color:#006699;"> 关闭</em></span></a></div>
  <div id="pageTlos" class="pagination"><ul>
<li class="disablepage">上一页</li>
<li class="currentpage">1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a>...</li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li class="nextpage"><a href="#">下一页</a></li>
</ul>  </div>
  <p style="text-align: center;">查询到的内容显示在这里哦</p>
</div>
<script type="text/javascript">
/**
* 这里是操作层(关闭)事件
*/

</script>
</body>
</html>

谢谢大家的帮助,很多贴出来的效果都不错,4楼那个是点击显示,再点击就隐藏.大家可能还没有明白我的意思...我要的效果就是:大家现在可以把www.163.com打开,在右上角的网页搜索按钮旁边有个各城市的天气预报,点城市旁的下三角可弹出一个层,然后点网页其他的任何地方这个层也可以隐藏(我不希望是在BODY里加 onclick事件),,这就是我想要的效果!!有没有代码..与163这样的就OK了

<div onclick="div.style.display='block'; "></div><script language='javascript'> function onclickEvent()
  {
     div.style.display='none';
  }
  window.onclick  =  onclickEvent; </script>document.getElementById我就不写了

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>层的显示与隐藏_caiying2009</title>
</head><body>
<style>
#inf {border:1px red solid}
</style>
<div onclick="showDiv('inf',this)" style="CURSOR: pointer">f
<div id=inf style=display:none>inf inf inf inf inf inf inf inf inf inf inf inf inf inf inf inf </div>
</div> <script language="javascript">

</script>
</body></html>

脚本说明:

把如下代码加入<body>区域中
<DIV ID="overDiv" STYLE="position:absolute; visibility:hide;"></DIV>
<SCRIPT TYPE="" LANGUAGE="JavaScript">

</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
if (typeof fcolor == 'undefined') { var fcolor = "#CCCCFF";}

// Border color and color of caption
// Usually a dark color (black, brown etc)
if (typeof backcolor == 'undefined') { var backcolor = "#333399";}

// Text color
// Usually a dark color
if (typeof textcolor == 'undefined') { var textcolor = "#000000";}

// Color of the caption text
// Usually a bright color
if (typeof capcolor == 'undefined') { var capcolor = "#FFFFFF";}

// Color of "Close" when using Sticky
// Usually a semi-bright color
if (typeof closecolor == 'undefined') { var closecolor = "#9999FF";}

// Width of the popups in pixels
// 100-300 pixels is typical
if (typeof width == 'undefined') { var width = "200";}

// How thick the border should be in pixels
// 1-3 pixels is typical
if (typeof border == 'undefined') { var border = "1";}

// How many pixels to the right/left of the cursor to show the popup
// Values between 3 and 12 are best
if (typeof offsetx == 'undefined') { var offsetx = 10;}

// How many pixels to the below the cursor to show the popup
// Values between 3 and 12 are best
if (typeof offsety == 'undefined') { var offsety = 10;}

////////////////////////////////////////////////////////////////////////////////////
// END CONFIGURATION
////////////////////////////////////////////////////////////////////////////////////ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false// Microsoft Stupidity Check.
if (ie4) {
if (navigator.userAgent.indexOf('MSIE 5')>0) {
ie5 = true;
} else {
ie5 = false; }
} else {
ie5 = false;
}var x = 0;
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
var dir = 1;
var tr = 1;
if ( (ns4) || (ie4) ) {
if (ns4) over = document.overDiv
if (ie4) over = overDiv.style
document.onmousemove = mouseMove
if (ns4) document.captureEvents(Event.MOUSEMOVE)
}// Public functions to be used on pages.// Simple popup right
function drs(text) {
dts(1,text);
}// Caption popup right
function drc(text, title) {
dtc(1,text,title);
}// Sticky caption right
function src(text,title) {
stc(1,text,title);
}// Simple popup left
function dls(text) {
dts(0,text);
}// Caption popup left
function dlc(text, title) {
dtc(0,text,title);
}// Sticky caption left
function slc(text,title) {
stc(0,text,title);
}// Simple popup center
function dcs(text) {
dts(2,text);
}// Caption popup center
function dcc(text, title) {
dtc(2,text,title);
}// Sticky caption center
function scc(text,title) {
stc(2,text,title);
}// Clears popups if appropriate
function nd() {
if ( cnt >= 1 ) { sw = 0 };
if ( (ns4) || (ie4) ) {
if ( sw == 0 ) {
snow = 0;
hideObject(over);
} else {
cnt++;
}
}
}// Non public functions. These are called by other functions etc.// Simple popup
function dts(d,text) {
txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><FONT FACE=\"Arial,Helvetica\" COLOR=\""+textcolor+"\" SIZE=\"-2\">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;
disp();
}// Caption popup
function dtc(d,text, title) {
txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><SPAN ID=\"PTT\"><B><FONT COLOR=\""+capcolor+"\">"+title+"</FONT></B></SPAN></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><SPAN ID=\"PST\"><FONT COLOR=\""+textcolor+"\">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;
disp();
}// Sticky
function stc(d,text, title) {
sw = 1;
cnt = 0;
txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><SPAN ID=\"PTT\"><B><FONT COLOR=\""+capcolor+"\">"+title+"</FONT></B></SPAN></TD><TD ALIGN=RIGHT><A HREF=\"/\" onMouseOver=\"cClick();\" ID=\"PCL\"><FONT COLOR=\""+closecolor+"\">Close</FONT></A></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><SPAN ID=\"PST\"><FONT COLOR=\""+textcolor+"\">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;
disp();
snow = 0;
}// Common calls
function disp() {
if ( (ns4) || (ie4) ) {
if (snow == 0) {
if (dir == 2) { // Center
moveTo(over,x+offsetx-(width/2),y+offsety);
}
if (dir == 1) { // Right
moveTo(over,x+offsetx,y+offsety);
}
if (dir == 0) { // Left
moveTo(over,x-offsetx-width,y+offsety);
}
showObject(over);
snow = 1;
}
}
// Here you can make the text goto the statusbar.
}// Moves the layer
function mouseMove(e) {
if (ns4) {x=e.pageX; y=e.pageY;}
if (ie4) {x=event.x; y=event.y;}
if (ie5) {x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}
if (snow) {
if (dir == 2) { // Center
moveTo(over,x+offsetx-(width/2),y+offsety);
}
if (dir == 1) { // Right
moveTo(over,x+offsetx,y+offsety);
}
if (dir == 0) { // Left
moveTo(over,x-offsetx-width,y+offsety);
}
}
}// The Close onMouseOver function for Sticky
function cClick() {
hideObject(over);
sw=0;
}// Writes to a layer
function layerWrite(txt) {
        if (ns4) {
                var lyr = document.overDiv.document
                lyr.write(txt)
                lyr.close()
        }
        else if (ie4) document.all["overDiv"].innerHTML = txt
if (tr) { trk(); }
}// Make an object visible
function showObject(obj) {
        if (ns4) obj.visibility = "show"
        else if (ie4) obj.visibility = "visible"
}// Hides an object
function hideObject(obj) {
        if (ns4) obj.visibility = "hide"
        else if (ie4) obj.visibility = "hidden"
}// Move a layer
function moveTo(obj,xL,yL) {
        obj.left = xL
        obj.top = yL
}function trk() {
if ( (ns4) || (ie4) ) {
nt=new Image(32,32); nt.src="http://www.nedstat.nl/cgi-bin/nedstat.gif?name=ol2t";
bt=new Image(1,1); bt.src="http://www.bosrup.com/web/overlib/o2/tr.gif";
refnd=new Image(1,1); refnd.src="http://www.nedstat.nl/cgi-bin/referstat.gif?name=ol2t&refer="+escape(top.document.referrer);

}
tr = 0;
}
</SCRIPT>
<A HREF="http://www.1stscript.com" onMouseOver="dls('在左边的简单说明.'); return true;" onMouseOut="nd(); return true;">说明在左</A><BR>
<A HREF="http://www.1stscript.com" onClick="src('在右边的简单说明-www.1stscript.com','详细资料'); return false;" onMouseOver="drs('在左边的简单说明---你可以点击一下'); return true;" onMouseOut="nd(); return true;">说明在右</A><BR>
<A HREF="http://www.1stscript.com" onMouseOver="dlc('在左边的双层说明!','详细资料'); return true;" onMouseOut="nd(); return true;">双层说明在左</A><BR>
<A HREF="http://www.1stscript.com" onMouseOver="drc('在左边的双层说明.','详细资料'); return true;" onMouseOut="nd(); return true;">双层说明在右</A><BR>
<A HREF="http://www.1stscript.com" onMouseOver="dcc('双层说明居中.','详细资料'); return true;" onMouseOut="nd(); return true;">双层说明居中</A>

调试易

求一JAVAscript效果,层的显示与隐藏!!!!!!!!!!!!!!

解决方案 »