当鼠标下滑到最底端，显示隐藏内容，求帮忙！ - 编程论坛

#2

tlliqi2014-09-16 20:42

顶一下

#3

chaiyesong2014-09-21 09:50

回复楼主 ll521yy

用DOM操作就行了

#4

polaris1322014-10-10 11:00

做个标签方在低端，开始隐藏，遍个dom鼠标事件吧

#5

dkp882014-11-07 10:19

<!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 编辑 ]

#6

dkp882014-11-07 11:03