<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.
<title>下拉显隐</title>
<style>
/*居底*/
#divID{min-height:60px;position:fixed;left:0;bottom:0;width:100%;}
#divID > div{min-height:60px;display:none;}
/*居左
#divID{min-width:60px;position:fixed;left:0;top:0;}
#divID > div{width:60px;height:100%;display:none;}
*/
</style>
<script>
$(function(){
$("#divID").hover(function(){
$(this).children("div").eq(0).stop().fadeIn();
},function(){
$(this).children("div").eq(0).stop().fadeOut();
})
//$("#divID").css({height:$(window).height()})
//开启居左，注释居底样式/*..*/，并将居左样式的注释去掉
/*移入下拉*/
$("#divID2").hover('return false',function(){
$(this).stop().animate({height:100},300);
});
$("#divID2 .b").hover(function(){
with($(this).parent()){
var h1=height();
css({height:'auto'});
var h2=height();
height(h1);
stop().animate({height:h2},600);
}
});
})
</script>
</head>
<body>
<div id="divID">
<div style="background:#CCC;">
内容都放到这里
</div>
</div>
<div id="divID2" style="background:#CCC;width:100px;height:100px;position:relative;margin:0 auto; overflow:hidden;">
<p>内容1</p><p>内容2</p><p>内容3</p><p>内容4</p><p>内容5</p><p>内容6</p><p>内容7</p>
<div class="b" style="background:#AAA;cursor:pointer;position:absolute;bottom:0;left:0;width:100%;">鼠标入这</div>
</div>
</body>
</html>
[
本帖最后由 dkp88 于 2014-11-7 13:07 编辑 ]
2014-09-16 16:24
