导航案例

时间：2016-05-08 18:04:07 阅读：158 评论：0 收藏：0 [点我收藏+]

标签：

思路：分两步，

1.先把各个框框画好

2.用JS实现效果。---用到两个事件：onmouseover,onmouseout

CSS：

@charset "utf-8";
/* CSS Document */
*
    {
     margin:0px;
     padding:0px;
    }
#a{
    border:1px solid #00F;
    width:120px;
    height:60px;
    left:300px;
    top:200px;
    background-color:#F00;
    position:absolute;
    overflow:hidden;}
.aa{
    border:1px solid #00F;
    background-color:#FC0;
    width:120px;
    height:180px;
    position:absolute;
    left:0px;
    top:60px;}
.aaa{
    border:1px solid #00F;
    background-color:#FC0;
    width:120px;
    height:180px;
    position:absolute;
    left:120px;
    top:0px;}
#b1{
    border:#00F solid 1px;
    background-color:#0F0;
    width:120px;
    height:60px;
    position:absolute;
    overflow:hidden;}
#b2{border:#00F solid 1px;
    background-color:#00F;
    width:120px;
    height:60px;
    left:0px;
    top:60px;
    position:absolute;
    overflow:hidden;
    }
#b3
    {
        border:#00F solid 1px;
        background-color:#F0F;
        width:120px;
        height:60px;
        left:0px;
        top:120px;
        position:absolute;
        overflow:hidden;}
        
        
.d{
    border:1px solid #00F;
    width:120px;
    height:60px;
    }
#da{
    left:420px;
    top:200px;
    background-color:#F00;
    position:absolute;
    overflow:hidden;
    }
#dd{
    border:1px solid #00F;
    width:120px;
    height:180px;
    left:0px;
    top:60px;
    background-color:yellow;
    position:absolute;
    }
#ddd
    {
     background-color:#0F0;
     position:absolute;
     overflow:hidden;    
    }
#e{     background-color:#00F;
     top:60px;
     position:absolute;
     overflow:hidden;
    }
#ee{
     background-color:#0FF;
     top:120px;
     position:absolute;
     overflow:hidden;}
        
.f{
    border:#00F solid 1px;
    background-color:#F0F;
    width:120px;
    height:180px;
    top:0px;
    left:120px;
    position:absolute;
    }

html-body部分

<body>
<div id="a" onmouseover="over1()" onmouseout="out1()"><div class="aa">
<div id="b1" onmousemove="over2()" onmouseout="out2()"><div class="aaa"></div></div>
<div id="b2" onmousemove="over3()" onmouseout="out3()"><div class="aaa"></div></div>
<div id="b3" onmousemove="over4()" onmouseout="out4()"><div class="aaa"></div></div>
</div>
</div>

<div class="d" id="da" onmouseover="over11()" onmouseout="out11()"><div id="dd">
<div class="d" id="ddd" onmousemove="over12()" onmouseout="out12()"><div class="f"></div></div>
<div class="d" id="e" onmousemove="over13()" onmouseout="out13()"><div class="f"></div></div>
<div class="d" id="ee" onmousemove="over14()" onmouseout="out14()"><div class="f"></div></div>
</div>
</div>
</body>
</html>
<script language="javascript">
function over1()
{
    var a=window.document.getElementById("a");
    a.setAttribute("style","overflow:visible");
    }
function out1()
{
    var a=window.document.getElementById("a");
    a.setAttribute("style","overflow:hidden");
    }
function over2()
{
    var a=window.document.getElementById("b1");
    a.setAttribute("style","overflow:visible")
    }
function out2()
{
    var a=window.document.getElementById("b1");
    a.setAttribute("style","overflow:hidden");
    }
function over3()
{
    var a=window.document.getElementById("b2");
    a.setAttribute("style","overflow:visible")
    }
function out3()
{
    var a=window.document.getElementById("b2");
    a.setAttribute("style","overflow:hidden");
    }
function over4()
{
    var a=window.document.getElementById("b3");
    a.setAttribute("style","overflow:visible")
    }
function out4()
{
    var a=window.document.getElementById("b3");
    a.setAttribute("style","overflow:hidden");
    }
function over11()
{
    var a=document.getElementById("da");
    a.setAttribute("style","overflow:visible");
    }
function out11()
{    var a=window.document.getElementById("da")
    a.setAttribute("style","overflow:hidden");
    }
function over12()
{
    var a=document.getElementById("ddd");
    a.setAttribute("style","overflow:visible");
    }
function out12()
{    var a=window.document.getElementById("ddd")
    a.setAttribute("style","overflow:hidden");
    }
function over13()
{
    var a=document.getElementById("e");
    a.setAttribute("style","overflow:visible");
    }
function out13()
{    var a=window.document.getElementById("e")
    a.setAttribute("style","overflow:hidden");
    }
function over14()
{
    var a=document.getElementById("ee");
    a.setAttribute("style","overflow:visible");
    }
function out14()
{    var a=window.document.getElementById("ee")
    a.setAttribute("style","overflow:hidden");
    }
</script>

导航案例

标签：

原文地址：http://www.cnblogs.com/jinshui/p/5470884.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行