cari

Rumah  >  Artikel  >  hujung hadapan web  >  使用jquery如何实现侧边栏左右伸缩效果

使用jquery如何实现侧边栏左右伸缩效果

亚连
亚连asal
2018-06-19 17:27:032609semak imbas

下面我就为大家分享一篇jquery实现侧边栏左右伸缩效果的示例，具有很好的参考价值，希望对大家有所帮助。

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>
		<p id="box">
			<p id="left">
				<p id="btn">收缩</p>
			</p>
			<p id="btnb">
				显示
			</p>
		</p>
		<script type="text/javascript">
			$(function(){
				$a = $(window).height();
				$("#left").height($a);
				$("#btn").click(function(){
					$("#left").animate({left:&#39;-200px&#39;});
					$("#btnb").delay(500).animate({left:&#39;0&#39;});
				});
				$("#btnb").click(function(){
					$("#btnb").animate({left:&#39;-50px&#39;});
					$("#left").delay(500).animate({left:&#39;0&#39;});
				});
			});
		</script>
	</body>
</html>

效果图：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用nodejs+mongodb+vue如何配置ueditor

在js中有关文件加载优化方面的问题

在Node.js中如何搭建小程序后台服务

使用vue如何引入ueditor及node后台配置

在angularjs中如何实现分页和搜索功能

在Nodejs中有关crypto模块安全知识（详细教程）

Atas ialah kandungan terperinci 使用jquery如何实现侧边栏左右伸缩效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：在Vue中如何实现数字输入框组件Artikel seterusnya：在JS函数中有关setTimeout详细介绍

Artikel berkaitan

Lihat lagi