时间:2021-07-01 10:21:17 帮助过:5人阅读
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>
效果图:
以上这篇jquery实现侧边栏左右伸缩效果的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。