zoukankan      html  css  js  c++  java
  • JS+CSS实现单击后的弹出菜单代码

    代码简介:JS配合CSS实现,单击文字后,弹出菜单,有点flash的味道。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>JS+CSS实现单击后的弹出菜单代码_网页代码站(www.webdm.cn)</title>
    <script type="text/javascript">
    var w = 0;
    var h = 0;
    var mout;
    function emotion(){
    var oMenu = document.getElementById("menu");
    if(w <= 50){
    oMenu.style.display = "block";
    fnLarge();
    }
    else{
    fnSmall();
    }
    }
    function fnLarge(){
    var oMenu = document.getElementById("menu");
    if(w < 200){
    w += 50;
    h += 25;
    oMenu.style.width = w+"px";
    oMenu.style.height = h+"px";
    window.setTimeout("fnLarge()",10);
    }
    }
    function fnSmall(){
    var oMenu = document.getElementById("menu");
    if(w > 0){
    w -= 50;
    h -= 25;
    oMenu.style.width = w+"px";
    oMenu.style.height = h+"px";
    window.setTimeout("fnSmall()",5);
    }
    else{
    oMenu.style.display = "none";
    }
    }
    </script>
    <style type="text/css">
    body{
    text-align: center;
    }
    p{
    cursor: pointer;
    margin: 0;
    padding: 0;
    font-size: 24px;
    display: inline;
    }
    div a:link, div a:visited{
    color: #666;
    text-decoration: none;
    }
    div a:hover{
    color: #FF6600;
    text-decoration: underline;
    }
    div{
    border: 2px solid #666;
    background: #fff;
    margin: 5px auto;
    overflow: hidden;
    display: none;
    padding: 5px 10px;
    }
    ul,li{
    margin: 0;
    padding: 0;
    }
    li{
    list-style: none;
    }
    li.title{
    font-weight: bold;
    }
    </style>
    	</head>
    <body>
    <p onclick="emotion();">hello, webdm!</p>
    <div id="menu" onmouseout="javascript:mout=setTimeout('fnSmall()',1000);" onMouseOver="javascript:clearTimeout(mout);">
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="50" valign="top" align="left"><ul><li class="title">class</li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" 
    
    onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li></li>
    </ul></td>
    <td width="50" valign="top" align="left"><ul><li class="title">class</li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" 
    
    onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall
    
    ();">item</a></li></ul></td>
    <td width="50" valign="top" align="left"><ul><li class="title">class</li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" 
    
    onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall
    
    ();">item</a></li></ul></td>
    <td width="50" valign="top" align="left"><ul><li class="title">class</li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" 
    
    onclick="fnSmall();">item</a></li>
    </ul></td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/dce71c8a-fd36-44f6-8688-2dd061fa78a6.html

  • 相关阅读:
    hdu 5400 Arithmetic Sequence(模拟)
    hdu 5402 Travelling Salesman Problem(大模拟)
    hdu 5009 Paint Pearls (dp)
    poj 1236 Network of Schools(tarjan+缩点)
    hdu 3836 Equivalent Sets(tarjan+缩点)
    编程之美2015初赛第一场 hihoCoder #1156 : 彩色的树(染色问题)
    hdu 2807 The Shortest Path(矩阵+floyd)
    The Unique MST (判断是否存在多个最小生成树)
    Advanced Fruits(好题,LCS的模拟)
    Dark roads(kruskal)
  • 原文地址:https://www.cnblogs.com/webdm/p/2074214.html
Copyright © 2011-2022 走看看