`
zhengshuangxi1226
  • 浏览: 50425 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js实现层的收缩01

阅读更多
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
*
{
margin:0;
padding:0;
}
.M_d
{
position:relative;
border:1px solid #eeaaee;
width:200px;
height:25px;
}
.M_M_d
{
width:200px;
background-color:#CCFFFF;
height:1px;
overflow:hidden;
}
.M_F_d
{
display:none;
}
</style>
<script type="text/javascript">
var act;
function  showMM()  {
var MM_height=document.getElementById("M_M_menu");
var MT_S=document.getElementById("M_T_menu");
var MF_S=document.getElementById("M_F_menu");
var Mclose=document.getElementById("Mclose");
if (MM_height.style.pixelHeight<150)  {
    MM_height.style.pixelHeight +=10;
clearTimeout(act);
    act=setTimeout("showMM()",30);   }
else {
MT_S.style.display="none";
    MF_S.style.display="block"; }
}  


function hiddenMM()  {
var MM_height=document.getElementById("M_M_menu");
var MT_S=document.getElementById("M_T_menu");
var MF_S=document.getElementById("M_F_menu");
var Mclose=document.getElementById("Mclose");
if (MM_height.style.pixelHeight>1) {
  MM_height.style.pixelHeight -=10;
  clearTimeout(act);
  act=setTimeout("hiddenMM()",30);   }
else { 
  MF_S.style.display="none";
  MT_S.style.display="block";
  Mclose.style.display="block";
  MM_height.style.pixelHeight=1;
    }
}  
function closeMM()  {
document.getElementById("M_menu").style.display="none";
}
</script>
</head>
<body >
<div id="M_menu" class="M_d">
   <div id="M_T_menu" class="M_T_d" ><span onclick="showMM()" style="background-color:#003399; float:left;">箭头(开)</span><span id="Mclose" onClick="closeMM()" style="float:left;background-color:#CC0000;display:none;">关闭</span></div>
   <div id="M_M_menu" class="M_M_d">
      fffffff<br>
  fffffff<br>
  fffffff<br>
  fffffff<br>
  fffffff<br>
  fffffff<br>
   </div>
   <div id="M_F_menu" class="M_F_d" ><span onclick="hiddenMM()" style="background-color:#003399">箭头(关)</span></div>
</div>
</body>
</html>
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    javascript层收缩效果

    标题中的“javascript层收缩效果”指的是使用JavaScript实现的网页元素(通常称为“层”或“div”)在用户交互下进行尺寸变化的效果。这种效果常见于菜单、侧边栏、弹窗等,使得页面布局更加动态和交互友好。在网页...

    javascript 多层嵌套的一个层展开、收缩实例

    本文将深入探讨如何使用JavaScript实现这一功能,以及相关的技术要点。 首先,我们需要理解什么是多层嵌套。在JavaScript对象或者数组中,当一个元素自身又包含了一个或多个同样类型的元素,就形成了嵌套结构。例如...

    JS 实现雅虎首页收缩效果

    在JavaScript(JS)中实现类似雅虎首页的局部收缩效果是一项常见的前端开发任务,它可以提升网页的用户体验,尤其是在有限的空间内展示更多的信息。雅虎首页的收缩效果通常指的是当用户鼠标悬停在某个模块上时,该...

    js实现div层缓慢收缩与展开的方法

    这个实例中,我们看到的是一个简单的JavaScript代码,它通过监听用户的点击事件来改变div元素的高度,从而实现层的伸缩效果。以下是这个功能的详细分析: 1. **DOM元素选择与操作**: - `toggle` 函数接收一个参数...

    滑动层收缩效果

    不过,通常这样的博客文章会包含实现滑动层收缩效果的代码示例、原理分析以及如何将其整合到项目中的指导。 “源码”标签暗示了这篇博客可能包含实际的编程代码,可能是JavaScript、CSS或HTML,这些是创建滑动层...

    echarts树图实现点击收缩子节点

    在JavaScript可视化库ECharts中,树图是一种常用于展示层次结构数据的图表类型。本教程将详细介绍如何在ECharts树图中实现点击节点时收缩其子节点的功能。首先,我们需要理解ECharts的基本概念和树图的特性。 ...

    JS+CSS实现DIV层的展开、收缩效果

    在网页开发中,动态效果的实现往往能提升用户体验,其中,JS+CSS实现的DIV层的展开和收缩效果就是一个常见的交互设计。这种效果允许用户通过点击按钮或链接来隐藏或显示指定的内容区域,使页面布局更加灵活且富有...

    CSS+JS实现一个DIV层的展开折叠效果

    CSS+JS 实现 DIV 层的展开折叠效果 本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式,用户可以点击按钮来展开或折叠内容。 HTML 结构 首先,我们需要...

    JS实现固定在右下角可展开收缩DIV层的方法

    1. **JavaScript实现固定位置的DIV层**:通过JavaScript和CSS的结合使用,可以创建一个始终固定在页面右下角的DIV层。这个DIV层可以被设计为在用户交互下展开和收缩。 2. **DIV层的展开收缩功能**:实现的DIV层能够...

    CSS3 3D层叠菜单展开收缩动画特效

    本篇我们将深入探讨如何利用CSS3实现3D层叠菜单的展开收缩动画特效。 首先,3D变换是CSS3的一个重要特性,它允许我们在2D平面上构建3D对象,通过`transform`属性来调整元素的尺寸、位置和旋转。在3D层叠菜单中,...

    asp无限级分类加js收缩伸展功能代码

    总的来说,"asp无限级分类加js收缩伸展功能代码"是一个结合了后端ASP处理无限级分类逻辑和前端JavaScript实现动态展示的技术方案。通过这种方式,可以创建一个可扩展性强、用户交互性好的分类系统。在开发过程中,...

    js实现的可伸缩的级联菜单

    在这个“js实现的可伸缩的级联菜单”项目中,开发者使用JavaScript这一强大的客户端脚本语言,构建了一个动态的、可扩展的级联菜单系统。 JavaScript是一种轻量级的解释型编程语言,主要应用于网页和网络应用的交互...

    css+javascript 实现扇形导航动画效果

    这个项目通过CSS来布局和设计扇形导航的静态部分,然后利用JavaScript实现动画效果,使导航菜单在用户的操作下优雅地展开和收起。 首先,我们来看看CSS在这其中的作用。CSS(层叠样式表)主要负责网页元素的样式和...

    左侧可收缩导航

    在实现“左侧可收缩导航”时,开发人员可能会采用以下技术: 1. HTML 结构:HTML5 提供了多种元素来构建导航结构,如`&lt;nav&gt;`、`&lt;ul&gt;`、`&lt;li&gt;`等。这些元素可以组合使用,创建出层次清晰的导航菜单。 2. CSS3:为了...

    一个可以收缩的层特效

    总之,创建一个可收缩的层特效涉及到多方面的Web开发技术,从HTML布局到CSS美化,再到JavaScript实现动态交互,每个环节都至关重要。通过学习和实践这样的效果,开发者可以提升网页的用户体验,并加深对前端技术栈的...

    JavaScript实现鼠标滑过带箭头的纵向3级导航菜单源码

    本资源提供了一种JavaScript实现的鼠标滑过带箭头的纵向3级导航菜单的源码,旨在帮助开发者创建具有视觉吸引力且易于操作的多级导航结构。 首先,我们需要理解JavaScript的基本概念。JavaScript是一种广泛使用的轻...

    菜单收缩(放在menu下)jsp

    这段代码通过JavaScript实现,并且特别注意到了浏览器兼容性问题,主要针对Internet Explorer(IE)进行了一些特定处理。下面我们将对该文件中的核心知识点进行详细解析。 ### 一、菜单收缩功能实现原理 #### 1. *...

    CSS层折叠(或收缩)与展开特效

    下面我们将详细探讨CSS和JS如何实现层的折叠与展开特效。 首先,CSS是样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。在CSS中,我们可以利用`display`属性来控制元素的显示状态。...

Global site tag (gtag.js) - Google Analytics