• 案例-------网页导航


    思路:分两步,

    1.先把各个框框画好

    2.用JS实现效果。

    ---用到两个事件:onmouseover,onmouseout

    方法一:

    CSS:

    @charset "utf-8";
    /* CSS Document */
    *
        {
         margin:0px;
         padding:0px;
        }
    #a{
        border:1px solid #00F;
        120px;
        height:60px;
        left:300px;
        top:200px;
        background-color:#F00;
        position:absolute;
        overflow:hidden;}
    .aa{
        border:1px solid #00F;
        background-color:#FC0;
        120px;
        height:180px;
        position:absolute;
        left:0px;
        top:60px;}
    .aaa{
        border:1px solid #00F;
        background-color:#FC0;
        120px;
        height:180px;
        position:absolute;
        left:120px;
        top:0px;}
    #b1{
        border:#00F solid 1px;
        background-color:#0F0;
        120px;
        height:60px;
        position:absolute;
        overflow:hidden;}
    #b2{border:#00F solid 1px;
        background-color:#00F;
        120px;
        height:60px;
        left:0px;
        top:60px;
        position:absolute;
        overflow:hidden;
        }
    #b3
        {
            border:#00F solid 1px;
            background-color:#F0F;
            120px;
            height:60px;
            left:0px;
            top:120px;
            position:absolute;
            overflow:hidden;}
            
            
    .d{
        border:1px solid #00F;
        120px;
        height:60px;
        }
    #da{
        left:420px;
        top:200px;
        background-color:#F00;
        position:absolute;
        overflow:hidden;
        }
    #dd{
        border:1px solid #00F;
        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;
        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>

     方法2:

    重点是onmouseover="this.className='aa'"  onmouseout="this.className='a'"

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    *{
    margin:0px;
    padding:0px;}
    .a{ border:#F00 solid 1px;
    120px;
    height:60px;
    background-color:#F00;
    left:200px;
    top:200px;
    position:absolute;
    cursor:pointer;
    overflow:hidden;}
    .aa
    {
    border:#F00 solid 1px;
    cursor:pointer;
    120px;
    height:60px;
    background-color:#F00;
    left:200px;
    top:200px;
    position:absolute;
    overflow:visible;}
    #aaa{
    border:1px solid #00FF00;
    background-color:#FF0;
    120px;
    height:180px;
    left:0px;
    top:60px;
    position:absolute;}
    .b{
    border:1px solid #00F;
    background-color:#F0F;
    120px;
    height:60px;
    position:absolute;
    overflow:hidden;}
    .ba{
    border:1px solid #00F;
    background-color:#F0F;
    120px;
    height:60px;
    position:absolute;
    overflow:visible;}

    
    

    .bb{
    border:1px solid #00F;
    background-color:#00F;
    120px;
    height:60px;
    top:60px;
    position:absolute;
    overflow:hidden;
    }
    .baa{
    border:1px solid #00F;
    background-color:#00F;
    120px;
    height:60px;
    top:60px;
    position:absolute;
    overflow:visible;
    }

    
    

    .bbb{
    border:1px solid #00F;
    background-color:#0FF;
    120px;
    height:60px;
    top:120px;
    position:absolute;
    overflow:hidden;
    }
    .baaa{
    border:1px solid #00F;
    background-color:#0FF;
    120px;
    height:60px;
    top:120px;
    position:absolute;
    overflow:visible;
    }
    .ccc
    { border:1px solid #00FF00;
    background-color:#FF0;
    120px;
    height:180px;
    left:120px;
    top:0px;
    position:absolute;
    }
    </style>
    </head>

    
    

    <body>
    <div class="a" onmouseover="this.className='aa'" onmouseout="this.className='a'">
    <div id="aaa">
    <div class="b" onmouseover="this.className='ba'" onmouseout="this.className='b'"><div class="ccc"></div></div>
    <div class="bb" onmouseover="this.className='baa'" onmouseout="this.className='bb'" ><div class="ccc"></div></div>
    <div class="bbb"onmouseover="this.className='baaa'" onmouseout="this.className='bbb'"><div class="ccc"></div></div>
    </div>
    </div>
    </body>
    </html>

     
  • 相关阅读:
    目标检测网络CenterNet详解(四)
    样本不均衡问题
    目标检测网络Faster RCNN详解(一)
    SpringCloud学习总结(八)——服务调用Feign
    OpenFeign(2020-10-13)
    Feign真正正确的使用方法
    微服务实战SpringCloud之Feign简介及使用
    spring cloud gateway网关和负载均衡框架ribbon实战
    Studio 3T 破解
    JVM 垃圾回收?全面详细安排!
  • 原文地址:https://www.cnblogs.com/jinshui/p/5470884.html
Copyright © 2020-2023  润新知