这篇文章主要介绍了 CSS+JS 实现点击文字弹出定时自动关闭 DIV 层菜单的方法, 设计 javascript 操作菜单的弹出与关闭的相关技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 CSS+JS 实现点击文字弹出定时自动关闭 DIV 层菜单的方法。分享给大家供大家参考。具体分析如下:
这里用 CSS+JS 实现点击文字后动画展开一个 DIV 层菜单,到期会自动关闭,是 CSS 结合 JS 实现的效果。
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- CSS+JS弹出DIV层
- </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; width:70px; } li.title{ font-weight:
- bold; }
- </style>
- </head>
- <body>
- <p onclick="emotion();">
- 点击这行文字试试!
- </p>
- <div id="menu" onmouseout="javascript:mout=setTimeout('fnSmall()',2111);"
- onMouseOver="javascript:clearTimeout(mout);">
- <table border="0" cellspacing="0" cellpadding="0">
- <tr>
- <td width="80" valign="top" align="left">
- <ul>
- <li class="title">
- ASP
- </li>
- <li>
- <a href="#" onclick="fnSmall();">
- 新闻
- </a>
- </li>
- <li>
- <a href="#" onclick="fnSmall();">
- 论坛
- </a>
- </li>
- <li>
- <a href="#" onclick="fnSmall();">
- CMS
- </a>
- </li>
- <li>
- </li>
- </ul>
- </td>
- <td width="80" valign="top" align="left">
- <ul>
- <li class="title">
- PHP
- </li>
- <li>
- <a href="#" onclick="fnSmall();">
- 文章
- </a>
- </li>
- <li>
- <a href="#" onclick="fnSmall();">
- 聊天
- </a>
- </li>
- <li>
- <a href="#" onclick="fnSmall();">
- 插件
- </a>
- </li>
- <li>
- <a href="#" onclick="fnSmall();">
- 企业
- </a>
- </li>
- </ul>
- </td>
- <td width="80" valign="top" align="left">
- <ul>
- <li class="title">
- JSP
- </li>
- <li>
- <a href="#" onclick="fnSmall();">
- AJAX
- </a>
- </li>
- <li>
- <a href="#" onclick="fnSmall();">
- JQUERY
- </a>
- </li>
- <li>
- <a href="#" onclick="fnSmall();">
- MYSQL
- </a>
- </li>
- <li>
- <a href="#" onclick="fnSmall();">
- JAVA
- </a>
- </li>
- </ul>
- </td>
- </tr>
- </table>
- </div>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0219/271368.html