`

层的卷帘效果

阅读更多

<!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>帮助</title>
 <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<input id="shen" type="button" value="展开帮助" onclick="shen();"/>

<div id="wind" style="background-color:#B0D8FF; overflow:hidden; float:inherit width:100px;height:0px; border:0px;">
你好!<br>
Hello!<br>
-.-<br>
猪!!!<br>


</div>
<script type="text/javascript">

//控制卷帘伸开的函数
function shen()
{
 var qq = document.getElementById("shen");
 if (qq.value == "展开帮助")
 {
  
  
  
  
  var tm;
  var windHeight = document.getElementById("wind").style.height;
  
  //如果目标对象的高度小于100px,则让其高度继续增大
  if (parseInt(windHeight.substring( 0, windHeight.indexOf("px"))) < 200)
  {
   //修改目标对象的高度为原有高度 + 2。
   document.getElementById("wind").style.height =
    parseInt(windHeight.substring( 0,
    windHeight.indexOf("px"))) + 10 + "px";
   //每50ms将为目标对象的告诉增加2
   tm = setTimeout("shen()" , 0.5);
  }
  else
  {qq.value="关闭帮助";
   clearTimeout(tm);
return;
  }
 }else if(qq.value == "关闭帮助"){
  
  var tm;
  var windHeight = document.getElementById("wind").style.height;
  //如果目标对象的高度大于3px,则让其高度继续增大
  if (parseInt(windHeight.substring( 0, windHeight.
   indexOf("px"))) > 1)
  {
   //修改目标对象的高度为原有高度 - 2。
   document.getElementById("wind").style.height =
    parseInt(windHeight.substring( 0,
    windHeight.indexOf("px"))) - 10 + "px";
   //每隔50ms将目标对象的高度减2
   tm = setTimeout("shen()" , 50);
  }
  else
  {qq.value="展开帮助";
   clearTimeout(tm);
return;
   
  }
 }
}
</script>
</body>
</html>

分享到:
评论

相关推荐

    HTML+css卷帘样式效果

    在HTML中,我们需要创建一个包含多个部分的结构,这些部分将作为卷帘效果的“窗帘”。例如,我们可以创建多个`&lt;div&gt;`元素,每个元素代表一个窗帘的部分。通过设置这些元素的宽度、高度以及相对位置,我们可以让他们...

    arcgis for flex实现的地图卷帘效果

    《ArcGIS for Flex实现的地图卷帘效果详解》 在GIS(地理信息系统)应用开发中,交互性和用户体验是至关重要的因素。ArcGIS for Flex是Esri公司提供的一种强大的地图开发工具,它允许开发者创建丰富的、交互式的Web...

    Flex GIS卷帘效果

    Flex GIS卷帘效果是一种在地理信息系统(GIS)中常见的交互方式,它允许用户通过类似卷帘的动作来展示或隐藏地图的某一层或多层,从而实现地图数据的动态切换和对比。这种效果通常用于地理信息的可视化,使得用户...

    JS图片卷帘门效果JS图片卷帘门效果

    JavaScript(简称JS)图片卷帘门效果是一种动态展示图片的网页特效,通常用于吸引用户的注意力或增加页面的交互性。这种效果通过JavaScript编程实现,它让多张图片以类似卷帘门的方式依次展开或收起,给人一种独特的...

    jquery 控制的卷帘菜单

    这段代码使用了jQuery的`slideToggle`方法,它会在指定速度('fast')下平滑地改变元素的高度,从而实现卷帘效果。 3. **CSS样式**: CSS负责菜单的外观和布局。确保正确设置`display`属性,以控制菜单项的初始...

    JS图片卷帘门效果(网页特效源码)

    【JS图片卷帘门效果】是一种常见的网页动态特效,它通过JavaScript和CSS技术来实现页面上图片的交互式展示,通常用于广告设计或者吸引用户的注意力。这种效果模拟了现实世界中卷帘门的升降动作,使得图片以一种独特...

    arcgis 扩展功能 透镜或放大镜 以及 卷帘

    卷帘效果则是地图遮罩层的一种动态展示方式,常用于对比不同地图层或者揭示隐藏信息。卷帘功能可以按照用户指定的方向(水平或垂直)逐步揭示地图的不同部分。实现卷帘功能的关键技术点包括: 1. **图层叠加**:...

    slider.rar cesium加载天地图实现地图卷帘

    3. 创建一个滑动条组件,监听其变化事件,根据滑动位置调整两个图层的透明度,实现卷帘效果。 下面是一个简化的示例代码片段: ```javascript // 创建两个图层 var layer1 = new Cesium....

    ArcEngine实现卷帘功能

    在实际应用中,开发者可能会进一步扩展卷帘功能,比如增加多个卷帘层以同时对比更多图层,或者加入时间轴以实现时空卷帘效果。此外,还可以通过调整卷帘的动画效果来提高用户体验。 总的来说,利用ArcEngine和C#...

    卷帘flash源代码

    例如,一个简单的卷帘效果可能涉及一个或多个电影剪辑(MovieClip)层,这些层上的图片在特定的时间间隔内逐步显示,模拟卷帘升起的过程。 要理解并修改这个源代码,你需要具备以下几点知识: 1. ActionScript基础...

    动态卷帘式窗体演示程序(VB6.0代码编写)

    首先,要实现动态卷帘效果,我们需要理解窗体的基本操作。在VB6.0中,窗体是程序的可视部分,可以包含各种控件,如按钮、文本框等。窗体的属性(如位置、大小、背景色)和方法(如Show、Hide)可以通过编程来控制。...

    Javascript+CSS实现影像卷帘效果思路及代码

    这样,随着鼠标横向移动,#before元素(即前层影像)的宽度发生变化,使得下层的影像逐层被卷起,从而形成卷帘效果。 实现这种效果需要使用到JavaScript、jQuery库以及CSS。在提供的代码段中,引用了一个名为...

    卷帘式导航菜单栏代码

    卷帘式导航菜单栏是一种流行的网页设计元素,它通过优雅的动画效果来展现网站的导航选项,提升用户体验。这种设计通常使用JavaScript和CSS技术来实现,使得菜单在用户交互时像卷帘一样展开或收起。下面将详细介绍...

    leaflet上下卷帘

    在Leaflet中实现上下卷帘效果,可以让用户更方便地探索地图数据,比如分层展示地形、人口分布、交通线路等信息。 【描述】:根据链接的文章(由于无法直接访问,以下内容基于一般上下卷帘功能的实现来解释),在...

    行业分类-设备装置-一种无卷帘双层膜储热式太阳能温室大棚支撑装置.zip

    1. **无卷帘系统**:传统的温室大棚往往使用卷帘系统来调节光照和温度,但无卷帘设计意味着它可能采用了一种更为自动化或智能化的方式来控制透光率和保温效果,例如通过可调节的遮阳网或者智能玻璃来实现。...

    卷帘和BOX裁剪

    同时,对于卷帘效果,还需要了解如何使用动画和事件处理来控制卷帘的动态显示。 在提供的文件“NewFunction802”中,可能包含了实现这些功能的示例代码、数据文件或项目配置。通过研究和运行这些示例,开发者可以...

    防火门及防火卷帘技术标准.pdf

    总的来说,防火门和防火卷帘的技术标准主要关注材料的耐火性能、结构的稳固性、防烟隔烟效果以及安装的可靠性。同时,它们都强调了对人体无害的环保要求和严格的防火等级标准,以确保在火灾发生时能够发挥有效的防护...

    visual c++ 仿千千静听和QQ,漂亮的界面,卷帘菜单,用了皮肤SKINMAGIC,还有导航栏.zip

    《VC++实现千千静听与QQ风格界面:卷帘菜单与皮肤技术解析》 在IT领域,用户体验一直是软件设计的重要考量因素,其中界面的美观度和易用性更是直接影响到用户对软件的第一印象。本项目是基于Visual C++实现的一个仿...

    卷帘式网站导航菜单

    卷帘式网站导航菜单是一种流行的网页设计元素,它在用户交互中提供了丰富的视觉效果和便捷的导航体验。这种菜单设计通常用于展示网站的多层次结构,尤其是当网站具有多个二级或更深层次的页面分类时。在本例中,我们...

    行业文档-设计装置-一种涤棉卷帘遮阳纸布.zip

    设计方面,涤棉卷帘遮阳纸布通常采用特定的编织方式,以确保足够的遮光效果同时保持一定的透光性。设计者会考虑到颜色搭配、图案设计以及整体的美学效果,使其与室内的装修风格相协调。此外,设计时还需考虑卷帘的...

Global site tag (gtag.js) - Google Analytics