实现DIV的叠加使用

半天闲着无聊就玩了以下DIV配合JAVASCRIPT实现一些简单的特效,简单的介绍下DIV的叠加

 

主要是有JAVASCRIPT来改变DIV 的样式属性

实现这一效果DIV的样式属性主要是有position设置为absolute绝对定位,可以将一系列的DIV 叠加起来,然后设置DIV 的display属性其值为none表示DIV在页面中隐藏,当鼠标划到导航栏中的指定栏目时用JAVASCRIPT来改变DIV的display属性为block表示在页面中显示这个DIV,标签属性onmouseover表示鼠标经过是触发

 

代码片段

<script type="text/javascript">
    function over(a,b,c,d){
        document.getElementById(a).style.display="block";//
        document.getElementById(b).style.display="none";
        document.getElementById(c).style.display="none";
        document.getElementById(d).style.display="none";
    }
</script>

<div style="width:300px; background-color:Gray">
        <span onmouseover="over('one','two','three','four');" style="cursor:hand">lanmu one</span> |
        <span onmouseover="over('two','one','three','four');" style="cursor:hand">lanmu two</span> |
        <span onmouseover="over('three','two','one','four');" style="cursor:hand">lanmu three</span> |
        <span onmouseover="over('four','two','three','one');" style="cursor:hand">lanmu four</span>
    </div>
    <div style="width:300px;height:100px">
        <div style="width:300px; height:100px;display:block; position:absolute;" id="one">one</div>
        <div style="width:300px; height:100px;display:none; position:absolute" id="two">two</div>
        <div style="width:300px; height:100px;display:none; position:absolute" id="three">three</div>
        <div style="width:300px; height:100px;display:none; position:absolute" id="four">four</div>
    </div>