带弹性展开的jQuery面板代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>带弹性展开的jQuery面板代码</title>
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; } /* End hide from IE Mac */ .none { display: none; } /* End Clearfix */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ol, ul {
    list-style: none outside none;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}
.clear {
    clear: both;
}
a { color: #FF6600;}
a:hover { text-decoration: none;}
h1.title_name {
	font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;
	font-weight: normal;
	font-size: 4em;
	color: #333;
	margin: 0;
	padding: 20px 0 0 0;
	text-align: center;
	line-height: 1em;
}
h1.title_name span {
	font-family: normal Georgia,'Times New Roman',Times,serif;
	color: #FF6600;
	font-size: 0.9em;
}
h1.title_name small {
	display: block;
	font-family: normal Verdana,Arial,Helvetica,sans-serif;
	font-size: 0.3em;
	font-weight: bold;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: #AAA;
	text-shadow: none;
}
#header { 
	margin-bottom: 20px;}
#footer {
	color: #666;
	text-align: center;
	letter-spacing: 1px;
	padding-top: 200px;
	clear: both;
}
#content { 
	width: 100%;
	margin: 0 auto;
}
/*-----------------------------------------------------------------------------------*/
/*	2.	Widget Overlay
/*-----------------------------------------------------------------------------------*/
#widget-overlay-container {
	position: absolute;
	width: 100%;
	z-index: 1000;
	top: -47px;
	left: 0;
	display: none;
}
#widget-overlay {
	z-index: 1000;
	padding: 0;
	background: #333;
	overflow: hidden;
	/*-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.80);
	-moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.80);
	box-shadow:0 0 2px rgba(0, 0, 0, 0.80);*/
}
#overlay-inner {
	position: relative;
	width: 950px;
	padding: 50px 0 30px;
	margin: 0 auto;
}
#overlay-inner .column {
	width: 280px;
	margin: 0 30px 0 0;
	padding-top: 30px;
	float: left;
	display: inline;
}
#overlay-inner .column h3 {
	color:#FF6600; 
	margin-bottom: 5px;
	font-family:Arial, Helvetica, sans-serif;
}
#overlay-inner { color: #DDD; line-height: 130%;}
#overlay-open {
	position: absolute;
	margin: 0;
	right: 0;
	z-index: 999;
}
#overlay-open a {
	background-image: url(//ku.shouce.ren/files/images/201601/56a316f5cac2e.png);
	width: 40px;
	height: 40px;
	display: block;
	text-indent: -9999px;
}
#overlay-open a:hover { background-position: 0 -41px; }
#overlay-open a.close { background-position: -41px 0; }
#overlay-open a:hover.close { background-position: -41px -41px; }
</style>
</head>
<body>

<div id="header">
<h1 class="title_name">Spring Show/Hide Effect with <span>jQuery</span><small>by Sunflowa Media</small></h1>
</div>

<div id="content">
<div id="widget-overlay-container">

<div id="widget-overlay">
    
    <div id="overlay-inner" class="clearfix">
        <div class="column">
            <h3>Title 01</h3>		
                <p>Js伸缩展开时的弹簧效果，弹出式面板，可以用此来制作一款伸缩菜单，也可以制作一个网站的登录窗口，不使用的时候隐藏在窗口的边缘，使用时自动伸展开来，而且像弹簧一样弹了几下停下来，增加网页的动感色彩。..</p>	
        </div>
        <div class="column">
            <h3>Title 02</h3>		
                <p>Winning the lottery once in a lifetime is pretty lucky. Winning the lottery twice in the same day? Virginia Pike is one of the few people that can describe that feeling.The Berryville, Va., resident had two tickets that matched five of the six Powerball numbers in an April 7 drawing so that each ticket was worth $1 million."I'm in shock!" Fike said in a news release from the Virginia lottery. </p>	
        </div>
        <div class="column">
            <h3>Title 03</h3>		
                <p>手册网提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等，做有质量的学习型源码下载站。
</p>	
        </div>
    
</div>

</div>
<div id="overlay-open"><a class="" href="#">Open Widget Area</a></div>

</div>
    
<div id="footer">
<p><strong>Say Hello</strong>: Check out <a href="/" target="_blank">Sunflowa Media Blog</a>, for more tutorials! <span class="follow">And you may also <a href="http://weibo.com/sunflowamedia" target="_blank">@me</a> on sina twitter</span></p>
</div>

</div>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {	
	var widgetOverlay = jQuery('#widget-overlay-container');
	var widgetTrigger = jQuery('#overlay-open a');
	
	var widgetOverlayHeight = widgetOverlay.height() + 3;

widgetOverlay.css({
		marginTop : -widgetOverlayHeight + 50,
		display : 'block'
	});
	
	widgetTrigger.toggle( function() {
		
		widgetOverlay.animate({
			marginTop : 0
		}, 900, 'easeOutBounce');
		
		widgetTrigger.addClass('close');
	
	}, function() {
		
		widgetOverlay.animate({
			marginTop : -widgetOverlayHeight + 50
		}, 900, 'easeOutBounce');
		
		widgetTrigger.removeClass('close');
		
	});
});
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

带弹性展开的jQuery面板代码

分类

表格图层

描述

Js伸缩展开时的弹簧效果，弹出式面板，可以用此来制作一款伸缩菜单，也可以制作一个网站的登录窗口，不使用的时候隐藏在窗口的边缘，使用时自动伸展开来，而且像弹簧一样弹了几下停下来，增加网页的动感色彩。 <br>　　使用了jQuery插件...