Welcome, Old Sport!

伸缩隐藏弹簧效果

by ilikecss ON 2012/04/25 7707

伸缩隐藏弹簧效果

之前某童鞋像我提过需要这样的一个效果,昨天看到一款插件不错就制作了这个弹簧效果。显示和隐藏层我想很多朋友都需要这种效果,我这里也做过不少类似效果,出于对这款弹簧效果的喜好所以在这里和大家分享,喜欢的朋友在文章最后下载DEMO。
PS: 测试后兼容大众浏览器: ie6/7,ff11,Chrome,Safari

Step1. 创建HTML

<div id="widget-overlay-container">
<!--BEGIN #widget-overlay -->
<div id="widget-overlay">
    <!--BEGIN #overlay-inner -->
    <div id="overlay-inner" class="clearfix">
        <div class="column">
            <h3>TEST TITLE </h3>		
            <p>TEST TEST TEST TEST TEST</p>	
            <p>TEST TEST TEST TEST TEST TEST</p>
        </div>
    <!--END #overlay-inner -->
</div>
<!--END #widget-overlay -->
</div>
<div id="overlay-open"><a class="" href="#">Open Widget Area</a></div>
<!--END #widget-overlay-container -->
</div>

Step2. 创建CSS

#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;
	/*-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(../img/overlay_open.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;}

Step3. 插入脚本

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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.js"></script>
12条评论
  1. #1

    zwwooooo说道:

    效果不错。

  2. #2

    axiu说道:

    demo什么的最喜欢了,效果华丽丽啊

  3. #3

    小米04说道:

    有时候会用得上的吧 :twisted:

  4. #4

    小钟说道:

    终于找到这个效果了,借用一下下哈^_^
    能请教一下怎么将这个效果改成从底部弹出吗?我改了好久都没改成功,不怎么懂JS啦 #_#

  5. #5

    小钟说道:

    你好,能再麻烦一下吗?您修改的从底往上弹出的效果不能兼容IE6哦
    您原效果却是兼容IE6的 :evil:

  6. 感谢啊 真不错 大气美观




TOP