点击文字，div在网页顶部下拉显示的效果

日本鬼子的网站：www.tripleships.com顶部右上角有个“contact us”，一点击，会出现下拉的div区域这样的效果，是什么思路？要用到哪些东西呢？求助

解决方案 »

  1.   

    呃 就是在最上面也放一个DIV 点击contact us的时候就显示 再次点击就隐藏，然后有一点缓动效果。
    要用到的就是div的隐藏，例：
    ---------------------------
    <style>
    #a{
      display:none;//设置默认隐藏
      width:100px;
      height:100px;
    }
    #b{
      width:100px;
      height:100px;
    }
    </style><script>
    var displayBar=true;
    function switchBar(obj){
    if (displayBar)
    {
    document.getElementById('a').style.display ="block";
    displayBar=false;
    }
    else{
    document.getElementById('a').style.display ="none";
    displayBar=true;
           }
    }
    </script><body>
    <div id="a">111111</div>
    <div id="b"><a href="#" onclick="switchBar(this)">按钮</a></div>
    </body>
    =================================
    ie8测试通过
      

  2.   

    <body>
        <div id="ceng" style="background-color: Red; width: 300px; height: 200px; display: none;">
            sss</div>
        <span id="wenzi">contact us</span>
    </body>
    </html>
    <script>
        $(function () {
            $("#wenzi").bind("click", function () {
                $("#ceng").slideDown("slow");
            });
        })
    </script>
      

  3.   

    那只是jquery里面的一个特效，没什么难度，jquery里面已经封装好了，还是跟楼主写完整，方便运行
    <body>
        <div id="ceng" style="background-color: Red; width: 300px; height: 200px; display: none;">
            sss</div>
         <span id="wenzi" style="cursor: pointer;">contact us</span>
    </body>
    </html>
    <script>
        $(function () {
            //绑定文字的点击事件
            $("#wenzi").bind("click", function () {
                //判断层是显示，还是隐藏，如果隐藏
                if (document.getElementById('ceng').style.display == "none") {
                    //显示
                    $("#ceng").slideDown("slow");
                }
                else {
                    //隐藏
                    $("#ceng").slideUp("slow");
                }
            });
        })
    </script>