JavaScript文本收缩展开 showdetail
2017-07-13 00:12
423 查看
原文发布时间为: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>
<!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设置FieldSet展开与收缩
- 文本区块收缩展开效果
- javascript使用substring展开与收缩文字
- js点击收缩展开文本
- 在需要的时候用javascript收缩文本高度
- 自定义TextView文本收缩,展开,例如:了解更多
- android 的textview显示过长文本时用一个按钮控制展开与收缩
- Jquery实现的文本展开和收缩
- jQuery插件treeview点击节点名称不展开、收缩节点 分类: JavaScript 2014-06-16 20:28 540人阅读 评论(0) 收藏
- jQuery插件treeview点击节点名称不展开、收缩节点 分类: JavaScript 2014-06-16 20:28 539人阅读 评论(0) 收藏
- 长文本在复杂cell里的收缩与展开
- javascript substring截取之收缩文本demo
- JavaScript设置FieldSet展开与收缩
- Javascript (JS) TreeView 收缩展开
- jQuery实现文本展开收缩特效
- JavaScript实现QQ列表展开收缩扩展功能
- android ExpandableTextView-自定义可以动态展开/收缩显示长文本的TextView
- 点击展开再点收缩文本的效果
- javascript实现树形目录的收缩与展开