jquery實現(xiàn)點擊側(cè)邊欄伸縮效果。點擊收縮，側(cè)邊欄向左收縮，顯示按鈕顯示；點擊顯示按鈕，顯示按鈕向左收縮，側(cè)邊欄顯示。
具體代碼如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <style> *{margin: 0;padding: 0;} #box{width: 100%;height: 100%;} #left{width: 200px;float: left;background-color: royalblue;position: relative;} #btn{width: 100%;height: 50px;background-color: darkgoldenrod;line-height: 50px;text-align: center;color: white;cursor: pointer;} #btnb{width: 50px;height: 50px;background-color: red;position: absolute;cursor: pointer;left: -50px;line-height: 50px;text-align: center;} </style> </head> <body> <div id="box"> <div id="left"> <div id="btn">收縮</div> </div> <div id="btnb"> 顯示 </div> </div> <script type="text/javascript"> $(function(){ $a = $(window).height(); $("#left").height($a); $("#btn").click(function(){ $("#left").animate({left:'-200px'}); $("#btnb").delay(500).animate({left:'0'}); }); $("#btnb").click(function(){ $("#btnb").animate({left:'-50px'}); $("#left").delay(500).animate({left:'0'}); }); }); </script> </body></html>效果圖：
以上這篇jquery實現(xiàn)側(cè)邊欄左右伸縮效果的示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
