jquery實現側邊欄左右伸縮
阿新 • • 發佈：2019-02-17
jquery實現點選側邊欄伸縮效果。點選收縮，側邊欄向左收縮，顯示按鈕顯示；點選顯示按鈕，顯示按鈕向左收縮，側邊欄顯示。
具體程式碼如下：
<!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>
效果圖：
