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实现侧边栏左右伸缩效果的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery实现侧边栏隐藏与显示的方法详解

    jQuery实现侧边栏隐藏与显示的方法详解

    本文实例讲述了jQuery实现侧边栏隐藏与显示的方法.分享给大家供大家参考,具体如下: web项目中经常会出现左侧侧边栏,右侧显示内容的web页面. 效果如图: 如何实现点击本周食谱,本周食谱的列表隐藏或显示切换,并关闭下周食谱列表显示,点击下周食谱,让下周食谱的列表隐藏切换显示,并关闭本周食谱列表显示 实现思路: 1.布局: 布局顶部的topDiv,左侧的leftDiv(optionDiv,navListUl), 布局右侧的contentDiv. 布局如图: 2.js控制optionDiv和n

  • Jquery实现显示和隐藏的4种简单方式

    Html代码: 复制代码 代码如下: <div class="topicList"> <h3><span>学习天地</span></h3> <ul> <li>1111111111</li> <li>2222222222</li> <li>333333333</li> <li>4444444444</li> <li&

  • jQuery固定浮动侧边栏实现思路及代码

    这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,现思路是这样的:首先获取需要跟随的DIV距离页面顶部的距离,然后判断,当浏览器滚动的距离大于该DIV本身距离顶部距离的时候,则添加CSS属性fixed即可. 代码如下 HTML代码: <div id="header">header</div> <div id="sidebarWrap"> <div id=&qu

  • 基于jQuery倾斜打开侧边栏菜单特效代码

    基于jQuery倾斜打开侧边栏菜单特效代码

    基于jQuery多重图片无限循环动画效果.这是一款非常实用的jQuery多图片无限循环动画特效插件. 效果图如下: 在线预览    源码下载 html代码: <div id="paper-back"> <nav> <div class="close"></div> <a href="#">Home</a> <a href="#">About U

  • jQuery侧边栏实现代码

    jQuery侧边栏实现代码

    先给大家展示下实现效果图,如果亲感觉是您想要的效果,请参考本代码. 实现代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript菜单侧边展开(改良版)</title> </head> <body> <ul id="navigation"> <li>&

  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

    当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提

  • jQuery侧边栏随窗口滚动实现方法

    复制代码 代码如下: $(function() {    var $sidebar   = $("#sidebar"),           $window    = $(window),           offset     = $sidebar.offset(),           topPadding = 15; $window.scroll(function() {           if ($window.scrollTop() > offset.top) { 

  • jQuery实现智能判断固定导航条或侧边栏的方法

    jQuery实现智能判断固定导航条或侧边栏的方法

    本文实例讲述了jQuery实现智能判断固定导航条或侧边栏的方法.分享给大家供大家参考,具体如下: 这是一个jQuery智能判断固定DIV层的特效代码,通过这个jQuery智能代码,你可以设置导航栏.侧边栏.任何DIV层的固定显示:现在蓝叶的站就用的这个jQuery智能判断固定的导航条,要看演示的就请下拉页面滚动条,就会看到导航条固定了:使用这个代码需要在页面里引用jQuery库的JS文件,现在的网站一般都引用了jQuery库代码,如果没有那就打开你网站的模板,在页头或者页位加上<script s

  • JQuery显示、隐藏div的几种方法简明总结

    例子 复制代码 代码如下: $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c

  • Jquery实现侧边栏跟随滚动条固定（兼容IE6）

    部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告. jQuery代码: 复制代码 代码如下: var rollSet = $('#Roll');// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改var offset = rollSet.offset();$(window).scroll(function () { // 检查对象的顶部是否在游览器可见的范围内 var scrollTop

  • jquery仿京东侧边栏导航效果

    jquery仿京东侧边栏导航效果

    本文实例为大家分享了jquery仿京东侧边栏导航的具体代码,供大家参考,具体内容如下 样式代码 <style> *{ padding: 0; margin: 0; border: 0; } body{ height: 2000px; } .right_ng{ width: 40px; height: 100%; position: absolute; position: fixed; right: 0px; background: #666666; } .sign{ width: 40px;

随机推荐