js案例_下滑列表

浏览数：18 / 时间：2015年06月09日

1、HTML布局（使用ul）：

<body>
    <ul>
        <li class="list" id="lis">
            <a href="#" id="link">微博</a>
            <ul id="ul1">
                <li><a href="#">评论</a></li>
                <li><a href="#">私信</a></li>
                <li><a href="#">@我</a></li>
            </ul>
       </li>
    </ul>
</body>

要实现下滑列表，当鼠标移动到下滑列表时，列表还能显示，就必须将列表包含在绑定事件里面

2、CSS样式

　　1、ul有默认的内外边距要去除

　　2、li有默认的列表样式要去掉

　　3、a不是区块元素，需要变成区块元素

    ul{ padding:0; margin:0;}
    li{ list-style:none;}
    .list{ width:120px; height:30px; border:1px solid red;}
    .list a{ line-height:30px; text-align:center; display:block; text-decoration:none; color:#000; background:#f1f1f1;}
    ul ul{ width:120px; border:1px solid #333; background:#FFC; display:none;}
    ul ul li{ text-align:center; line-height:30px;}
    ul ul li a{ text-decoration:none; color:blue;}
    ul ul li a:hover{ color:#0C0; background:#90C;}

注解：

　　1、希望把某个元素移除你的视线：

　　　　　　1、display:none; 显示为无

　　　　　　2、visibility:hidden; 隐藏
　　　　　　3、width \ height 将宽高设置为0
　　　　　　4、透明度() 将透明度设置为百分百
　　　　　　5、left \ top
　　　　　　6、拿一个白色DIV盖住它
　　　　　　7、margin负值

　　　　　　------------

3、js实现下滑列表原理

<script type="text/javascript">
    window.onload = function(){
        var lin = document.getElementById("link");
        var li = document.getElementById(‘lis‘);
        var ul = document.getElementById(‘ul1‘);
        
        li.onmouseover = show;
        li.onmouseout = hide;
        
        
        function show(){
            ul.style.display = "block";
            lin.style.background = ‘yellow‘;
        }
        
        function hide(){
            ul.style.display = "none";
            lin.style.background = ‘#f1f1f1‘;
        }
        
    }
</script>

　　　注解：

　　　　　　1、JS中如何通过id获取元素：

　　　　　　　　document get element by id ‘link‘

　　　　　　　　docuemnt.getElementById(‘link‘);

　　　　　　2、事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件……

　　　　　　　　onclick

　　　　　　　　onmouseover
　　　　　　　　onmouseout
　　　　　　　　onmousedown
　　　　　　　　onmouseup
　　　　　　　　onmousemove 就像是鼠标抚摸一样的事件
　　　　　　　　……

　　　　　　　　onload 加载完以后执行……
　　　　　　　　window.onload = 事情
　　　　　　　　img.onload
　　　　　　　　body.onload
　　　　　　　　……

　　　　　　3、如何添加事件：
　　　　　　　　元素.onmouseover

　　　　　　4、函数：可以理解为-命令，做一些事~~
　　　　　　　　function abc(){ // 肯定不会主动执行的！
　　　　　　　　　　……
　　　　　　　　}
　　　　　　　　1、直接调用：abc();
　　　　　　　　2、事件调用：元素.事件 = 函数名 oDiv.onclick = abc;

　　　　　　　　function (){} 匿名函数
　　　　　　　　　　元素.事件 = function (){};

　　　　　　5、测试：
　　　　　　　　alert(1); 带一个确定按钮的警告框
　　　　　　　　alert(‘ok‘); ‘ok‘ 字符串
　　　　　　　　alert("ok");

　　　　　　6、变量：
　　　　　　　　var li = document.getElementById(‘lis‘);
　　　　　　　　var num = 123;
　　　　　　　　var name = ‘leo‘;