jquery实现帮侧悬浮可收缩层

javaScript代码

 <script type="text/javascript">
$(document).ready(function(){

/*

返回值:jQuerybind(type,[data],fn)

type,[data],function(eventObject)String,Object,FunctionV1.0

type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

fn:绑定到每个匹配元素的事件上面的处理函数

为每个匹配元素的特定事件绑定事件处理函数。

*/

 $("#floatShow").bind("mouseenter",function(){
 //自定义动画函数 opacity透明度
  $("#onlineService").animate({width:"show", opacity:"show"}, "normal" ,function(){
   $("#onlineService").show();
  $("#floatShow").attr("style","display:none");
  $("#floatHide").attr("style","display:block");
  });
  
 });
 
 $("#floatHide").bind("mouseup",function(){
 
  $("#onlineService").animate({width:"hide", opacity:"hide"}, "normal" ,function(){
   $("#onlineService").hide();
    $("#floatShow").attr("style","display:block");
  $("#floatHide").attr("style","display:none");
  });
 });
  $("#layer").bind("mouseup",function(){
 
  $("#onlineService").animate({width:"hide", opacity:"hide"}, "normal" ,function(){
   $("#onlineService").hide();
    $("#floatShow").attr("style","display:block");
  $("#floatHide").attr("style","display:none");
  });
 });
 
});
</script>

css代码

<style type="text/css">
/* online */
#layer{z-index:9999;position:fixed;right:0px;top:0;margin:0px 0 0 0;padding-right: 1px;}
 #layer{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
#tab{width:0px;float:left;margin:80px 0 0 0;position:relative;z-index:9;}
#onlineService{display:inline;float:left;display:none;padding:1px 0 0 0;}
</style>

html代码

<div id="layer" >
 <div id="tab">
  <a id="floatShow" title="点击弹出" style="display:block;" href="javascript:void(0);"><font color="black" size="4px" ><strong style="background-color: #E0E0E0;">部门列表</strong></font></a>
  <a id="floatHide" title="点击收回" style="display:none;" href="javascript:void(0);"><font color="white" size="5px"><strong>部门列表</strong></font></a>
 </div>
 <div id="onlineService">
  <div class="onlineMenu" >
   <table   class="jtr" style=" background-color:#FCF4DF;">
       <tr>
       <td   bgcolor="d3eaef" class="STYLE10">
       </td>
       <td   bgcolor="d3eaef" class="STYLE6" >
        <div align="center">
         <span class="STYLE10">部门</span>
        </div>
       </td>
       
      </tr>
      <s:iterator value="hashMap" status="va" var="map">
       <tr <s:if test="#va.Even"> style="background-color:#E4F3FB;" </s:if>>
        <td  height="20"  class="STYLE19">
         <div align="center">

         </div>
        </td>
        <td  height="20"  class="STYLE19">
         <div align="left">
          <a href="TelphoneAction?key=<s:property value="#map.key" />"> <s:property value="#map.value" /></a>
         </div>
        </td>
        
       </tr>
      </s:iterator>
     </table>
     </table>
  </div>

注：记得导jquery库。