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获取table下某一行某一列的值实现代码
Apr 07 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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使之能同时支持GIF和JPEG
2006/10/09 PHP
第十五节--Zend引擎的发展
2006/11/16 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
python操作gmail实例
2015/01/14 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python中装饰器学习总结
2018/02/10 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
python十进制转二进制的详解
2020/02/07 Python
python IDLE添加行号显示教程
2020/04/25 Python
python中的插入排序的简单用法
2021/01/19 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
档案接收函
2014/01/13 职场文书
委托书模板
2014/04/04 职场文书
应届生找工作求职信
2014/06/24 职场文书
小学生作文评语集锦
2014/12/25 职场文书
公路施工安全责任书
2015/05/08 职场文书
村官2015年度工作总结
2015/10/14 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书