您的位置：首页 > Web前端 > JavaScript

javascript关于层的操作

2016-09-12 20:19 393 查看
打开层和关闭层

<head>  

    <title>无标题页</title>  

    <script type="text/javascript">  

    function Show(btn)  

    {  

        var div1=document.getElementById("div1");  

          

        if(btn.value=="打开层")  

        {  

            div1.style.display='';//display为空，显示层  

            btn.value="关闭层";  

        }  

        else   

        {  

            div1.style.display='none';//display为none，关闭层  

            btn.value="打开层";  

        }  

    }  

    </script>  

</head>  

<body>  

    <input id="Button1" type="button" value="打开层" onclick="Show(this)"/>  

      

<div id="div1" style="display:none">这里显示层中的内容</div>  

</body>  

</html>

案例：点击登录显示登录的层

<head>

<title>点击登陆显示登陆的层的窗口</title>

<script type="text/javascript">

 function showLogin(){

  var loginDiv = document.getElementById("loginDiv");

  loginDiv.style.display="";

 }

 function hideLogin(){

  var loginDiv = document.getElementById("loginDiv");

  loginDiv.style.display="none";

 }

</script>

</head>

<body>

<a href="javascript:showLogin()">登陆</a>

<div style="position:absolute;top:200px;left:200px;border:solid 1px green;display:none;" id="loginDiv">

 <img src="close.jpg" style="float:right" onclick="hideLogin()"/>

 <table>

  <tr>

   <td>

    <label for="username">用户名</label>

   </td>

   <td>

    <input type="text" id="username"/>

   </td>

  </tr>

  <tr>

   <td>

    <label for="password">密  码</label>

   </td>

   <td>

    <input type="password" id="password"/>

   </td>

  </tr>

 </table> 

</div>

</body>

</html>

层的操作：

A、位置

position：static、absolute、relativa

div.style.top/left

B、大小

div.style.height/weight

案例：

点击小图，显示详细大图

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS操作DOM点击图片弹出层显示大图片和详细信息</title>

<script type="text/javascript">

 function showDetails(){

  var details = document.getElementById("details");

  details.style.display='';

  details.style.left = window.event.clientX;

  details.style.top = window.event.clientY;

  

 }

 function hideDetail(){

  var details = document.getElementById("details");

  details.style.display='none';

 }

</script>

</head>

<body>

<img src="xiao.jpg" onmouseover="showDetails()"/>

<div style="display:none;position:absolute;" id="details">

<img src="da.jpg" />

<p>身高：177</p>

<p>昵称：可爱</p>

<p><input type="button" value="关闭" onclick="hideDetail()"/></p>

</div>

</body>

</html>

还有版本2：动态加载图片
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航