本實例使用jquery操作div的CSS，實現了可隱藏重現的靠邊懸浮層，預覽效果網址：http://www.keleyi.com/keleyi/phtml/xuanfudiv/
本實例使用到jquery新增移除類的兩個方法，詳細介紹請參考網址：http://www.keleyi.com/a/bjac/e9e40a974de5a902.htm
下面給出完整程式碼，儲存到html檔案可查看效果。
jquery實現的可隱藏隱藏的靠邊懸浮層-腳本之家 <br><script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> <br> <br>body{ margin:0px;} <br>.onkeleyicom{left:0px;} <br>.offkeleyicom{left:-140px;} <br>.showkeleyicom{可見性:可見;} <br>.hidekeleyicom{可見性：隱藏；} <br>#xf_keleyi_com{寬度：166px;高度：200px;背景顏色：透明；位置：固定；頂部：200px；} <br>jt_com#com#com {float:right;width:25px;height:25px;margin-top:80px;} <br>#nr_keleyi_com{float:left;高度：100%；寬度：136px；背景顏色：銀色；} <br> style>; <br>頭> <br> <br><div style="background-color:#959822; width:100%;height:150px;">可以捲動滑鼠讓頁面升級 div> <br><div style="background-color:Green; width:100%;height:150px;">www.keleyi.com</div> <br><div style="background-color:Red; width:100%;height:150px;">請把畫面移到箭頭上</div>; <br><div style="background-color:Yellow; width:100%;height:150px;">hi; <br><div style="background-color:Silver; width:100%;height:150px;">柯樂義</div>; <br><div style="background-color:Aqua; width :100%;height:150px;">keleyi.com</div> <br><div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>; <br><div style="background-color:Green; width:100%;height:150px;">keleyi.com</div> <br><div style="background-color:Blue; width:100%;height :150px;">柯樂義</div>; <br><div style="background-color:Olive; width:100%;height:150px;">柯樂義jquery 實現的可隱藏隱藏的靠邊懸浮層</div> <br><div style="background-color:Green; width:100%;height:150px;">A</div> <br><div style="background-color:Purple; width:100%; height:150px;">jquery</div>; <br><div style="background-color:Green; width:100%;height:150px;"><a href="http://www.keleyi.%20com/a/bjac/cdbc89174171ebb8.htm%20" target="_blank"> 原文</a></div> <br><div style="background-color:Lime; width:100%;height:150px;"> keleyi.com</div> <br><div style="background-color:Orange; width:100%;height:150px;">
<a href="http://www.keleyi.com/menu/jquery%20/" target="_blank">jQuery</a>完整程式碼</div> <br><div class="offkeleyicom" id="xf_keleyi_com">; <br><div id="nr_keleyi_com">這裡是內容<br>>www.keleyi.com <br><ul> <br><li>
<a href="http://www.keleyi.com/menu/net/" target="_blank">.NET </a> <br>
</li> <br><li>
<a href="http://www.keleyi.com/menu/javascript/" target="_blank">Javascript</a> <br>
</li> <br><li>
<a href="http://www.keleyi.com/menu/jquery/" target="_blank">jQuery</a> <br>
</li> <br><li>
<a href="http://www.keleyi.com/menu/csharp/" target="_blank">C#</a> <br>
</li> <br><li>其他 <br>
</li> <br>
</ul> <br><br>> <br>
</div> <br><div id="jt_keleyi_com">
<img src="http://www.keleyi.com/keleyi/pmedia/rightarrow.jpg" alt="jquery實現的可隱藏重現的靠邊懸浮層實例程式碼_jquery"> </div> <br>
</div> <br> <br>$(document).ready( <br>function () { <br>$('#jt_keleyi_com' ).bind('mouseover', function () { <br>$('#xf_keleyi_com').removeClass ("offkeleyicom"); <br>$('#xf_keleyi_com').addClass("onkeleyicom"); >$('#jt_keleyi_com').addClass("hidekeleicom"); ').removeClass("showkeleyicom"); <br>}) <br>$('#nr_keleyi_com').bind('mouseleave', function ( ) { <br>$('#xf_keleyi_com').removeClass(" onkeleyicom"); <br>$('#xf_keleyi_com').addClass("offkeleyicom"); <br>$('jt_Classley_#jt_Classi_com' ("hidekelei_com"); <br>$('#jt_keleyi_com') .addClass("showkeleyicom"); <br>}) <br>}) <br>; <br>身體> <br>}) <br>; <br>身體> <br> </div>
</div>
