html的点击拉伸效果,html 用js改变 拉伸的一个效果;

HTML 结构

原理︰

1. 一开始 #footerSlideContent 拿取自身高度、然後 Dom ready 之後就把 height 设成 0 隐藏掉

2. 在 #footerSlideNav 是一个控制台，内容随便，没有特别，就是在里面设置一个 的开关

3. 点击 #showFooter，#footerSlideContent 就会把高度用 animate 表现出来，做成 slide up 的效果

#footerSlideContainer {

position: fixed;

bottom: 0;

left: 0;

width: 100%;

}

JS 重点

var original_h = $('#footerSlideContent').height(); // 先拿取高度

$('#footerSlideContent').height(0); // 隐藏整个 Content

$('#showFooter').click(function(){

$('#footerSlideContent').animate({

'height' : original_h // 回复 footerSlideContent 的高度，用 animate 效果

});

});

其它的你应该懂的吧 样式控制位置的; 可以改变;