原文发布时间为：2009-11-15 —— 来源于本人的百度文章 [由搬家工具导入]

<!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=gb2312" />
<title>无标题文档</title>
</head>

<body>
<div id="divS" style="border:1px solid #f0f0f0;background-color:#ccc;padding:4px;margin:10px">
<p>测试文本</p>
<p>测试了</p>
<p>测试侧试试了</p>
<p>测试文本</p>
<p>测试了</p>
<p>测试侧试试了</p>
<p>测试</p>
<p>测试文本</p>
<p>测试了</p>
<p>测试侧试试了</p>
<p>测试文本</p>
<p>测试了</p>
<p>测试侧试试了</p>
</div>
<p>
<script type="text/javascript"><!--
doShrink(document.getElementById('divS'),60);
function doShrink(oshrink,maxHeight){  
    if(oshrink){  
        var oH = (oshrink.clientHeight||oshrink.offsetHeight);  
        if(oH>maxHeight){  
            var linka = document.createElement("a");  
            var div = document.createElement("div");     
            div.innerHTML = "……<br />"
            text = document.createTextNode("[点击查看更多内容]");
            linka.href = "javascript:void(0)";  
            linka.onclick = function(e) { shrinkShow(this); }  
            linka.appendChild(text);  
            div.appendChild(linka);
            var onext = oshrink.nextSibling;  
            if(onext)  
                oshrink.parentNode.insertBefore(div,onext);  
            else
                oshrink.parentNode.appendChild(div);  
            //过滤较长的内容  
            oshrink.srcHeight = oH;  
            oshrink.style.cssText ="overflow-y: hidden; max-height: "+maxHeight+"px; *_height: "+maxHeight+"px; ";  
        }  
    }  
}

function remove(o){
if(o && o.parentNode)o.parentNode.removeChild(o);
}

/* 第一种，具有展开效果 */
var shrinkInterval = false;  
function shrinkShow(obj) {  
    var omore = obj.parentNode;  
    var ohide = omore.previousSibling;  
    shrinkInterval = window.setInterval(function(){shrinkStep(ohide);},20);
remove(omore); //去除更多链接
}  

function shrinkStep(ohide){  
    var targetHeight = ohide.srcHeight;  
    var nowHeight = (ohide.clientHeight||ohide.offsetHeight);;  
    if(nowHeight < targetHeight){  
        ohide.style.height = nowHeight+20 + 'px';  
        ohide.style.maxHeight = nowHeight+20 + 'px';  
    }else{  
        if(shrinkInterval){  
            window.clearInterval(shrinkInterval);  
            shrinkInterval = false;  
        }  
    }  
}

/* 第二种，没有展开效果 */

/*
function shrinkShow(obj) {  
    var omore = obj.parentNode;  
    var ohide = omore.previousSibling;  
    ohide.style.height = ohide.srcHeight + 'px';  
    ohide.style.maxHeight = ohide.srcHeight + 'px';
remove(omore); //去除更多链接
}
*/

// --></script>
</p>
</body>
</html>

JavaScript文本收缩展开 showdetail的更多相关文章

  1. jQuery文本段落展开和折叠效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  2. JS 播放列表收缩展开

    下面要做实现的效果 收缩和展的功能 遵循网页布局,行为,结构,样式 分离 下面是html 结构代码: <div id="drop" class="down_list ...

  3. jQuery 收缩展开效果

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  4. jQuery 文本段落展开和折叠效果

    jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" c ...

  5. javascript 文本框值变化触发事件

    javascript 文本框值变化触发事件jo.find(".price").bind('input onpropertychange', function () { me.cal ...

  6. C#使用splitContainer控件制作收缩展开面板

    C#使用splitContainer控件制作收缩展开面板 原创 2011年07月19日 17:18:02 标签: c# / object / 扩展 / 测试 15690         最近对Squi ...

  7. JS收缩展开效果

    // 收缩展开效果 $(document).ready(function () { $(".box h2").toggle(function () { $(this).next(& ...

  8. 多个div的多文本部分展开显示+关键字自动标注

    效果: 源码: <%@ page language="java" contentType="text/html; charset=utf-8" pageE ...

  9. JavaScript文本框焦点事件

    效果图如下: <!-- 当文本框获得焦点时候,如果文本框内容是 请输入搜索关键字 清空文本框,输入内容变黑色 --> <!-- 当文本框失去焦点时候,如果文本框无内容,则添加灰色的 ...

随机推荐

  1. 八、Shell test 命令

    Shell test 命令 Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值.字符和文件三个方面的测试. 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt ...

  2. JavaScript ES6功能概述（ECMAScript 6和ES2015 +）

    JavaScript在过去几年中发生了很大的变化.这些是您今天可以开始使用的12项新功能! 该语言的新增内容称为ECMAScript 6.它也称为ES6或ES2015 +. 自1995年JavaScr ...

  3. ubuntu crontab设置定时任务

    ubuntu 设置定时任务   crontab -l  #查看详情crontab -e #设置定时任务 * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用* ...

  4. yii2 RUL的生成

    通常情况下,会使用 yii\helpers\Url 使用Url类来生成想要的URL地址(链接) Url提供的方法大都是静态方法,不需要对类进行实例化 1.1 最常用的 Url::to() 1.2. b ...

  5. GoF23种设计模式之创建型模式之单态模式

    1概述 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 2适用性 1.当类只能有一个实例而且客户可以从一个总所周知的访问点访问它的时候. 2.当这个唯一实例应该是通过子类化可扩展的,并且客户应 ...

  6. (转)CocoaPods

    本文转自http://nshipster.cn/cocoapods/ 文明是建立在道路,桥梁,运河,下水道,管线,电线和光纤这些基础设施之上的.只要设计和施工得当,它们可以帮助社会成倍的发展. 唯一的 ...

  7. PAT Basic 1083

    1083 是否存在相等的差 给定 N 张卡片,正面分别写上 1.2.…….N,然后全部翻面,洗牌,在背面分别写上 1.2.…….N.将每张牌的正反两面数字相减(大减小),得到 N 个非负差值,其中是否 ...

  8. Kubernetes配置Ceph RBD StorageClass

    1. 在Ceph上为Kubernetes创建一个存储池 # ceph osd pool create k8s 2. 创建k8s用户 # ceph auth get-or-create client.k ...

  9. 【转载】2015年8月编程语言排行榜：Java遥遥领先

    Java以4.5%的差距遥遥领先于第二名,回顾以前Java有这样的成绩还是在2008年.Java version 8的成功主要是因为函数式编程习语的添加.Java出现下滑是在2010年 Oracle收 ...

  10. Git的安装及常用操作

    一.Git的安装 1.下载Git,官网地址为:https://git-scm.com/downloads.     2.下载完成之后,双击目录进行安装 3.选择安装目录 4.选择组件,默认即可 5.设 ...