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

js实现层的收缩默认收缩

 
阅读更多
<style>
#content {
font-size: 14px;
width: 100%;
height: 50px;
background: #eee;
padding: 10px;
border: 4px #ccc double;
overflow: hidden;
}
#key {
color: red;
float: right;
margin-top: -20px;
}
span{cursor:pointer;}
</style>
<script>
var s=5;
var minheight=50;
var maxheight=450;
function shoppingcat(){
  var content=document.getElementById("content");
  var key = document.getElementById("key");
  var t=content.style;
  if(t.height==""||t.height==0)
    t.height=minheight;
  var h=parseInt(t.height);
  if(key.innerHTML=="展开"){
    h+=s;
    t.height=h+"px";
    if(h<maxheight){
      setTimeout("shoppingcat();",1);
    }else{
      key.innerHTML="关闭";
    }
  }else{
    h-=s;
    t.height=h+"px";
    if(h>minheight){
      setTimeout("shoppingcat();",1);
    }else{
      key.innerHTML="展开";
    }
  }
}
</script>

<div id="content"><br/>
<span id="key" onclick="shoppingcat();">展开</span><br/>
藤床纸帐朝眠起,

说不尽、无佳思。

沈香烟断玉炉寒,

伴我情怀如水。

笛声三弄,

梅心惊破,

多少春情意。


小风疏雨萧萧地,

又催下、千行泪。

吹箫人去玉楼空,

肠断与谁同倚?
一枝折得,

人间天上,

没个人堪寄。

欢迎再次光临

牛图库特效。
</div>
分享到:
评论
发表评论

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

相关推荐

    JS实现菜单收缩

    这篇博文“JS实现菜单收缩”探讨了如何利用JavaScript来动态控制网页中的菜单栏状态,使其能够在点击时展开或收起。 首先,我们需要理解JavaScript的基本语法和DOM操作。DOM(Document Object Model)是HTML和XML...

    JS 实现雅虎首页收缩效果

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

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

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

    滑动层收缩效果

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

    列表收缩-JavaScript

    在这个“列表收缩-JavaScript”的主题中,我们将探讨如何使用JavaScript实现这一功能,包括基础概念、实现方法和优化技巧。 1. **基础概念**: - **DOM操作**:在JavaScript中,我们通过Document Object Model ...

    基于jquery+bootstrap的侧边栏收缩菜单

    Bootstrap默认包含了一些过渡效果,但开发者也可以自定义CSS样式来实现更个性化的动画效果。 在实际项目中,可能还需要考虑到不同屏幕尺寸下的显示效果。Bootstrap的媒体查询(Media Queries)和`.navbar-expand-*`...

    layui侧边收缩菜单

    总的来说,layui侧边收缩菜单的实现涉及到HTML结构设计、layui模块的使用,以及JavaScript事件处理。通过合理布局和有效的交互设计,我们可以创建一个既美观又实用的侧边栏菜单,适应各种设备和用户需求。

    zTree树形菜单展开收缩插件

    - **MtrSearchZTree.js**:这是一个JavaScript文件,可能包含了zTree的具体配置和操作逻辑,如初始化zTree对象、实现模糊查询功能等。 - **css**:这个目录可能包含zTree的CSS样式文件,用于定制节点的外观,如...

    echarts tree 点击节点收缩(关闭子节点)功能实现

    在本文中,我们将深入探讨如何在ECharts库中实现一个具有点击节点收缩(关闭子节点)功能的树形图表(Tree)。ECharts是一款基于JavaScript的数据可视化库,它提供了丰富的图表类型,包括柱状图、折线图、饼图以及...

    jQ 展开收缩效果

    本文将深入探讨如何使用jQuery实现"展开收缩"效果,这种效果常见于网上商城的商品详情展示、菜单导航等场景,为用户提供更加直观且易用的界面。 首先,我们需要了解jQuery的基本用法。jQuery通过选择器选中页面中的...

    js实现侧边隐藏菜单收缩特效代码.zip

    这个"js实现侧边隐藏菜单收缩特效代码.zip"压缩包显然包含了使用JavaScript编写的代码,用于创建一个具有侧边隐藏菜单收缩效果的网页元素。这种效果通常应用于响应式设计,使得在移动设备或小屏幕设备上,菜单可以更...

    左侧可收缩导航

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

    收缩式导航菜单

    本文将深入探讨如何使用JavaScript来实现这种收缩式导航菜单。 首先,我们需要创建HTML结构。一个简单的收缩式导航菜单可能包含一个`&lt;nav&gt;`元素,里面有一些`&lt;ul&gt;`列表项,列表项可以进一步包含子菜单的`&lt;ul&gt;`。...

    c#导航弹性收缩展开菜单

    "c#导航弹性收缩展开菜单"是一个项目,旨在创建一个具有动态效果的PC端导航菜单,它使用JavaScript (js) 和jQuery (jq) 进行前端实现,以提供用户友好的交互体验。 在C#中,虽然主要处理后端逻辑,但也可以通过ASP...

    js树形导航菜单制作点击展开收缩二级菜单

    这可以通过jQuery库或者原生JavaScript实现。以下是原生JavaScript的例子: ```javascript document.querySelectorAll('.parent').forEach(function(item) { item.addEventListener('click', function(e) { e....

    实现菜单弹出和收缩

    本文将详细解析如何实现“tab菜单”的弹出和收缩效果,主要涉及HTML、CSS以及JavaScript(或者现代前端框架如React、Vue等)的相关知识。 首先,我们从HTML结构开始。一个简单的tab菜单通常由多个tab按钮和对应的...

    jquery收缩菜单点击展开收缩菜单代码

    然后,我们可以编写jQuery代码来实现菜单的展开和收缩。这里的核心是使用`.click()`事件监听器和`.slideToggle()`方法: ```javascript $(document).ready(function() { $("#menu ul li:has(ul)").click(function...

    jquery展开时不收缩其他的菜单

    本话题聚焦于使用jQuery来实现一个功能:当一个菜单项展开时,其他菜单项不自动收缩。这通常涉及到菜单树的交互设计,尤其在创建多级导航菜单时十分常见。 菜单树是一种常见的UI组件,它允许用户通过层级结构来浏览...

    js+css3圆环图标菜单展开收缩特效.zip

    这篇文章将详细讲解如何实现"js+css3圆环图标菜单展开收缩特效",以及涉及到的相关技术知识点。 首先,我们从标题和描述中可以得知,这是一个使用JavaScript和CSS3技术实现的交互式圆环菜单。菜单在默认状态下是...

    简单的菜单收缩代码

    通常,你会看到一个HTML文件(如`index.html`)包含了菜单结构,一个CSS文件(如`styles.css`)设置了样式,以及一个JS文件(如`script.js`)实现了菜单的收缩和展开逻辑。 以上就是关于“简单的菜单收缩代码”的...

Global site tag (gtag.js) - Google Analytics