通过div透明度实现隐藏div图层效果、通过js控制缩放div效果

#map_canvas {
left: 0px;/*0*/
width: 100%;
height: 100%;
background: #cccccc;
overflow: auto;
top: 0px;/*0px*/
bottom: 0px;
position: absolute;
_height: 100%;
_border-top: 30px solid #eee;
_border-bottom: 30px solid #eee;
_top: 0;

}
#toolbar {
background-color:#D9E8FB;
width:100%;
height:32px;
position:absolute;
z-index:4;
left:0px;
opacity:0.1;
top:0px;"
}
#toolbar:hover {
background-color:#D9E8FB;
width:100%;
height:35px;
position:absolute;
z-index:4;
left:0px;
opacity:0.9;
top:0px;"
}
#button_div{
background-color:#D9E8FB;
width:10px;
height:5px;
position:absolute;
z-index:4;

margin-right:0px;
opacity:0.9;
top:23px;"
}
.highLight{
opacity:0.5;
margin-right:0px;
}
.highLight:hover{
opacity:1;
}

/**工具条收缩*/
var isUp = false;
function change(path){
var image = document.getElementById("submit");
var bar_div = document.getElementById("toolbar");
var button_div = document.getElementById("button_div");
if(isUp == true){
image.src = "image/up.gif";
bar_div.style.display = "block";
button_div.style.top = "23px";
isUp = false;
}
else if(isUp == false){
image.src = "image/down.gif";
bar_div.style.display = "none";
button_div.style.top = "0px";
isUp = true;
}
}

<div id="toolbar">
<table style="font-size:14px;margin-top:0px;">
<tr>
<td style="height:25px;">
<a href="#" data-icon="" class="button orange shield glossy"><%=carName%></a>
</td>
<td>

</td>

<td>
从:
<input type="text" name="Txt_SDateTime" id="Txt_SDateTime"
style="width: 120px; height: 19px">
</td>

<td>
到:
<font face="Arial"><input type="text" name="TxtEDateTime"
id="TxtEDateTime" style="width: 120px; height: 19px">
</font>
</td>
<td>
<font face="Arial"> <input type="image" name="submit"
onclick='toQuery()' src="image/search.png" alt="查询" title="查询"> </font>
</td>
<td id="wait">
<img title="数据量" src='./images/star_end.png' />
</td>
<td id="mark_count">
0000
</td>
<td>
 播放速度:
<select name="playSpeed" id="playSpeed">
<option value="0.000000000001">
快速
</option>
<option value="50" selected="selected">
中速
</option>
<option value="100">
慢速
</option>
</select>
</td>
<td>
 <input type="image" title="定位起点" alt="定位起点" src="image/start.png" onClick="toStart()" />
 
<input id="play_img" type="image" title="播放" alt="播放" src="image/play.png" onClick="toPlay()" />
 
<input id="stop_img" type="image" title="暂停" src="image/stop.png" onClick="toStop('<%=basePath %>');" />
 
<input type="image" title="定位终点" alt="定位终点" src="image/end.png" onClick="toEnd()" />
</td>
</tr>

</table>

</div>
<div id="button_div">
<table style="width:100%;padding:0">
<tr>
<td align="left" valign="middle">
<input id="submit" type="image" src="image/up.gif" onclick="change('<%=basePath %>')" class="highLight"/>
</td>
</tr>
</table>
</div>

<div id="map_canvas"></div>