jquery实现侧边栏左右伸缩效果的示例
更新时间：2017年12月19日 10:18:07 作者：包子源
下面小编就为大家分享一篇jquery实现侧边栏左右伸缩效果的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
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实现侧边栏左右伸缩效果的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。这篇文章主要介绍了Bootstrap的核心——栅格系统的使用,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了HTML5中用js、jQuery结合Ajax实现文件上传功能，HTML5中已经可以用Ajax上传文件了，而且代码简单，借助 FormData类即可发送文件数据，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了jQuery实现动态删除LI的方法,结合实例形式分析了jQuery针对页面元素动态操作相关实现技巧,需要的朋友可以参考下2017-05-05
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Bootstrap是网上最流行的前端开发框架。下面通过本文给大家分享将 jQuery 从你的 Bootstrap 项目中移除的方法，需要的的朋友参考下吧2017-07-07
jQuery实现table表格checkbox全选的方法分析
这篇文章主要介绍了jQuery实现table表格checkbox全选的方法,结合实例形式分析了jQuery事件响应与元素遍历实现table表格checkbox元素状态动态修改相关操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了jQury Ajax使用Token验证身份实例代码,需要的朋友可以参考下2017-09-09
jQuery Easyui学习之datagrid 动态添加、移除editor
使用easyui行编辑的时候完成编辑的功能比较简单，但是如果要根据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比较麻烦了，下面给大家介绍easyui datagrid 动态添加、移除editor，感兴趣的朋友一起学习吧2016-01-01
今天项目中加了一个上传文件的需求,我就搞了一下,下面这篇文章主要给大家介绍了关于jquery ajax实现文件上传提交的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
jQuery操作attr、prop、val()/text()/html()、class属性
这篇文章主要介绍了jQuery操作attr、prop、val()/text()/html()、class属性 ，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
本文介绍了jquery实现轮播图效果示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论