当前位置:主页 > jquery教程 > jquery实现侧边栏左右伸缩效果的示例

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

发布:2020-03-05 18:39:29 177


给寻找编程代码教程的朋友们精选了jQuery相关的编程文章,网友简秋珊根据主题投稿了本篇教程内容,涉及到jquery、侧边栏、jquery实现侧边栏左右伸缩效果的示例相关内容,已被785网友关注,相关难点技巧可以阅读下方的电子资料。

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>
		<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基于ajax对json操作的实例

    发布:2020-05-21

    这篇文章主要介绍了jQuery基于ajax操作json数据的方法,结合简单实例形式分析了jQuery的ajax基本使用方法及json数据传输操作相关技巧,需要的朋友可以参考下


  • jQuery选择器知识点总结

    发布:2020-01-21

    本文主要对jQuery选择器进行一一举例介绍,有助于学习、理解和记忆。具有很好的参考价值,下面就跟着小编一起来看下吧


  • jQuery旋转插件jqueryrotate用法详解

    发布:2022-06-22

    给大家整理一篇关于jQuery的教程,这篇文章主要介绍了jQuery旋转插件jqueryrotate用法,结合实例形式详细分析了jqueryrotate插件的功能、定义及相关参数的使用方法,需要的朋友可以参考下


  • jQuery的ajax封装方法实例内容

    发布:2020-05-21

    AJAX 是一种用于创建快速动态网页的技术。这篇文章主要介绍了基于jQuery的ajax方法封装的相关资料,需要的朋友可以参考下


  • 实例详解jquery属性及常用的函数

    发布:2020-01-11

    本篇文章主要是对jquery中常用的函数和属性进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助


  • 对之前写的jquery分页做下升级

    发布:2023-01-10

    给大家整理了关于jquery的教程,之前写的分页,操作时要把传的参数放到隐藏hidden中,比较麻烦,下面重新包装了一下,需要的朋友可以参考参考


  • jQuery中的deferred用法分享

    发布:2020-04-20

    deferred对象是jQuery的回调函数解决方案,jQuery之前的版本中异步回调这块做的不是很好,所以后期补上了该解决方案。接下来通过本文给大家介绍jQuery中的derferred使用方法,非常不错,需要的朋


  • 深入理解bootstrap data和jquery .data

    发布:2020-02-16

    最近在做项目的时候用到了bootstrap,在使用中发现其data与jquery的data有些不一样的地方,记录一下,分享给大家


网友讨论