jquery实现侧边栏左右伸缩效果的示例


Posted in jQuery onDecember 19, 2017

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实现侧边栏左右伸缩效果的示例

以上这篇jquery实现侧边栏左右伸缩效果的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jquery中done和then的区别(详解)
Dec 19 #jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 #jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 #jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 #jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 #jQuery
jquery获取transform里的值实现方法
Dec 12 #jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 #jQuery
You might like
十天学会php之第六天
2006/10/09 PHP
全文搜索和替换
2006/10/09 PHP
杏林同学录(三)
2006/10/09 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
PHP curl使用实例
2015/07/02 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP调用其他文件中的类
2018/04/02 PHP
php微信开发之图片回复功能
2018/06/14 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
vue表单自定义校验规则介绍
2018/08/28 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
幼儿园毕业教师感言
2014/02/21 职场文书
终止合同协议书
2014/04/17 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android