前端学习代码实例-JavaScript点击按钮弹出层效果

最新推荐文章于 2024-06-11 02:06:44 发布

weixin_34417814

最新推荐文章于 2024-06-11 02:06:44 发布

阅读量663

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://my.oschina.net/zybc/blog/3039555

版权

为什么80%的码农都做不了架构师？>>>

强大的效果其实都是由一个个简单的功能组合而成的，下面介绍一下如何实现点击一个按钮弹出一个层的效果。

代码实例如下：



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>web前端开发学习q=qu-n：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>

转载于:https://my.oschina.net/zybc/blog/3039555