JavaScript文本收缩展开 showdetail

原文发布时间为：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">
测试文本
测试了
测试侧试试了
测试文本
测试了
测试侧试试了
测试
测试文本
测试了
测试侧试试了
测试文本
测试了
测试侧试试了
</div>

<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 = "…… "
 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 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>

</body>
</html>

转载于:https://www.cnblogs.com/handboy/p/7158381.html

JavaScript文本收缩展开 showdetail相关推荐

jQuery 文本段落展开和折叠效果
找了几个感觉这个效果是最好的,最简单的. jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv=" ...
ASP.NET 动态输出Javascript 文本格式换行问题 [ASP.NET | C# | Response]
一.普通输出问题分析.测试 1. 我们先来看一段代码: /// <summary> /// 连接接数据库 /// </summary> ...
JavaScript文本特效实例小结【3个示例】
本文实例讲述了JavaScript文本特效.分享给大家供大家参考,具体如下: 1.标题跑马灯常常能够在一些新闻网站,或者其他地方,看到文字在一个特定的区域内,来回滚动.一旦超出边界就消失了,那么这些 ...
实现对手机联系人列表进行读写操作，并用RecyclerView收缩展开方式展现
实现对手机联系人列表进行读写操作,并用RecyclerView收缩展开方式展现在之前做的类微信界面上加了显示手机联系人,姓名,电话,邮箱三项信息的功能,同时可以添加联系人同步到手机联系人记录中,添加 ...
uni-app，文本实现展开、收起全文
效果: 思路: 1.根据文本显示的布局中,每行大致能显示的文字个数.(实例是大致每行26个文字) 2.首先加载页面时,根据文字总长度判断是否超出自定义行数,来处理相应的数据,多余自定义行数,截取对应的 ...
JavaScript文本晃动js特效代码
下载地址 JavaScript文本晃动特效代码 dd:
javascript 文本框限制输入1到10位数字正则表达式
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!D ...
JavaScript 文本编码解码详解笔记
JavaScript 文本的编码解码文本编码文本编码方法分为批量编码和流编码. 1.批量编码所谓批量编码,指的是JavaScript引擎会同步编码整个字符串.对于非常长的字符串,可能会花较长时间 ...
element-ui 表格(table)合并表头下面合并列且可以收缩展开
百度了一大堆,发现了首行不能合并,想到了用dom做,找到了下面这个链接要点记录: 1.表头合并 -- 给table添加属性:header-cell-style="headerStyle&q ...
android 卡片收缩展开,jQuery和CSS3炫酷堆叠卡片展开和收缩特效
插件描述:这是一款效果超酷的jQuery和CSS3堆叠卡片展开和收缩特效.该图片特效开始的时候卡片被堆叠在一起,当用户点击最上面的卡片的时候,堆叠图片以各种动画方式展开.展开后再点击任意卡片,它们又会 ...

JavaScript文本收缩展开 showdetail

JavaScript文本收缩展开 showdetail相关推荐

最新文章

热门文章