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

js实现层的收缩默认收缩

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>层展开/关闭 - 运动缓冲效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="小秦,展开,关闭,运动缓冲,效果,javascript,封装" />
<meta name="description" content="展开/关闭 - 运动缓冲效果" />
<meta name="copyright" content="Copyright 2008 XQin.cn" />
<meta name="author" content="小秦" />
<script type="text/javascript">
/*
    函数名称: Scroll
    Scroll(obj, h, s)
    参数说明:
        obj,[object] id值或对象.     必需
          h,[height] 展开后的高度.   可选(默认为200px)
          s,[speed]   展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}.
    函数返回值:
        true    展开(对象的高度等于展开后的高度)
        false   关闭(对象的高度等于原始高度)
*/
function Scroll(obj, h, s){
    if(obj == undefined){return false;}
    var h = h || 500;
    var s = s || 1.12;
    var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
    var status = obj.getAttribute("status")==null;
    var oh = parseInt(obj.offsetHeight);
    obj.style.height = oh;
    obj.style.display = "block";
    obj.style.overflow = "hidden";
    if(obj.getAttribute("oldHeight") == null){
        obj.setAttribute("oldHeight", oh);
    }else{
        var oldH = Math.ceil(obj.getAttribute("oldHeight"));
    }
    var reSet = function(){
        if(status){
            if(oh < h){
                oh = Math.ceil(h-(h-oh)/s);
                obj.style.height = oh+"px";
            }else{
                obj.setAttribute("status",false);
                window.clearInterval(IntervalId);
            }
        }else{
            obj.style.height = oldH+"px";
            obj.removeAttribute("status");
            window.clearInterval(IntervalId);
        }
    }
    var IntervalId = window.setInterval(reSet,10);
    return status;
}
window.onload= function(){
    document.getElementById('detail').onclick = function(){
        Scroll('detail', 300, 1.3);
    }
    document.getElementById('text').onclick = function(){
        Scroll('text');
    }
}
</script>
</head>
<body>
<p id="detail" style="border:1px dashed #f00;">这是一个段落啦!!哇哈哈哈<br/>点我一下下啦:)</p>
<div id="text" style="border:1px solid #0f0">Hello World!<br/>你敢点我不 -_|||</div>
<button onclick="Scroll('text', 400, 1.2)">Hello World</button>
</body>
</html>

分享到:
评论
发表评论

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

相关推荐

    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-*`...

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

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

    layui侧边收缩菜单

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

    jQ 展开收缩效果

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

    zTree树形菜单展开收缩插件

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

    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