写在前面的话：今天的新老师讲DOM，应用了各种鼠标点击和移除等事件案例。十分有趣。以下这个案例根据老师布置的一个简单下拉菜单作业来做的。
其中需要注意的细节很多。应用领域一般在电商平台首页的顶部：当鼠标滑过，就会弹出一个Block。鼠标离开，恢复原来的形状。又比如某些手机官网如魅族，应用的是左侧的弹出block的方式。http://store.meizu.com/这是他们的官网。
效果是一样的吧。
ps:今晚花了一个多小时调试了好几次，终于慢慢做了出来。
最终效果如下：
以下是CSS样式部分：
<style>*{
margin:0px;
padding:0px;
}
p{
text-align:center;
height:20px;
line-height:20px;
cursor:pointer;
background:url(down.gif) no-repeat 10px center;
}
div{
width:100px;
height:20px;
border:1px solid black;
margin:200px auto 0;
position:relative;
}
ul li{
cursor:pointer;
list-style:none;
text-align:center;
}
ul{
width:100px;
border:1px solid black;
border-top:0 none;
position:absolute;
left:-1px;
top:19px;
display:none;
background:white;
}
</style>
____________________________
以下是body 部分：
<body>
<p>购物</p>
<ul>
<li>水果</li>
<li>蔬菜</li>
<li>日用品</li>
<li>百货</li>
</ul>
</div>
<img src="../图片素材/08edb97424f21733b94e27.jpg" width="3500" height="2333" border="0" alt="">
//这个图片可以代替，用来验证挤出特性。
以下是dom部分：
var divq = document.getElementById('box');
var ps = document.getElementsByTagName('p')[0];
var uls= divq.getElementsByTagName('ul')[0];
divq.onmouseover = function(){
uls.style.display = 'block';
ps.style.backgroundImage = 'url(up.gif)';
}
divq . onmouseout = function(){
uls.style.display = 'none';
ps.style.backgroundImage = 'url(down.gif)';
}
</script>
</body>
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
