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

css

#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;
            }

2.javascript

/**工具条收缩*/
        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;
            }
        }

3.html

<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=" 120px; height: 19px">
                </td>

                <td>
                    到:
                    <font face="Arial"><input type="text" name="TxtEDateTime"
                            id="TxtEDateTime" style=" 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>
                    &nbsp;播放速度:
                    <select name="playSpeed" id="playSpeed">
                        <option value="0.000000000001">
                            快速
                        </option>
                        <option value="50" selected="selected">
                            中速
                        </option>
                        <option value="100">
                            慢速
                        </option>
                    </select>
                </td>
                <td>
                    &nbsp;<input type="image" title="定位起点" alt="定位起点" src="image/start.png" onClick="toStart()" />
                    &nbsp;
                    <input id="play_img" type="image" title="播放" alt="播放" src="image/play.png" onClick="toPlay()" />
                    &nbsp;
                    <input id="stop_img" type="image" title="暂停" src="image/stop.png" onClick="toStop('<%=basePath %>');" />
                    &nbsp;
                    <input type="image" title="定位终点" alt="定位终点" src="image/end.png" onClick="toEnd()" />
                </td>
            </tr>
                
        </table>
            
        </div>
        <div id="button_div">
            <table style="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>