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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery操作之效果详解
May 19 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
oracle资料库函式库
2006/10/09 PHP
又一个php 分页类实现代码
2009/12/03 PHP
浅析PHP绘图技术
2013/07/03 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
Web程序工作原理详解
2014/12/25 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
网页常用特效代码整理
2006/06/23 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
python 测试实现方法
2008/12/24 Python
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
企业职业病防治方案
2014/05/29 职场文书
金融专业求职信
2014/08/05 职场文书
销售员态度差检讨书
2014/10/26 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书