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 相关文章推荐
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
JQuery事件冒泡和默认行为代码实例
May 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学习之PHP运算符
2006/10/09 PHP
php反弹shell实现代码
2009/04/22 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
JavaScript中的排序算法代码
2011/02/22 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
js变量提升深入理解
2016/09/16 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
C语言面试题
2015/10/30 面试题
银行职业规划书范文
2013/12/28 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
关于环保的演讲稿
2014/05/10 职场文书
2014年度党员自我评议
2014/09/13 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python