前端學習程式碼例項-JavaScript點選按鈕彈出層效果
摘要：
強大的效果其實都是由一個個簡單的功能組合而成的，下面介紹一下如何實現點選一個按鈕彈出一個層的效果。
程式碼例項如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8...
強大的效果其實都是由一個個簡單的功能組合而成的，下面介紹一下如何實現點選一個按鈕彈出一個層的效果。
程式碼例項如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>web前端開發學習q群：731771211詳細教程講解</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:160px;
height:100px;
background:#33ccff;
display:none;
position:absolute;
}
div ul{text-align: center;}
div li{list-style-type: none;}
button{
top:300px;
left:400px;
position:absolute;
}
</style>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementsByTagName('button')[0];
var flt=document.getElementsByTagName('div')[0];
btn.onclick=function(ev){
var ev=ev||window.event;
if(ev.cancelBubble){ev.cancelBubble=true;}
else{ev.stopPropagation()}var x=btn.offsetLeft-15+'px';
var y=btn.offsetTop-100+'px';
flt.style.top=y;
flt.style.left=x;
flt.style.display='block';
}
document.onclick = function(){
flt.style.display='none';
}
}
</script>
</head>
<body>
<button id="btn">點選彈出層</button>
<div>
<ul id="nav">
<li class="item1"><a href="">告訴你個祕密</a></li>
<li class="item2"><a href="">這個地球</a></li>
<li class="item3"><a href="">我最帥</a></li>
<li class="item4"><a href="">你知道就行了</a></li>
<li class="item5"><a href="">別告訴給別人</a></li>
</ul>
</div>
</body>
</html>