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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery+ajax实现用户登录验证
Sep 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预定义变量使用帮助(带实例)
2013/10/30 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
python字典多条件排序方法实例
2014/06/30 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
简单实现python画圆功能
2018/01/25 Python
Python安装selenium包详细过程
2019/07/23 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
python 实现客户端与服务端的通信
2020/12/23 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
汽车专业毕业生自荐信
2013/11/03 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
初三毕业感言
2015/07/31 职场文书