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">
<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的更多相关文章
- jQuery文本段落展开和折叠效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- JS 播放列表收缩展开
下面要做实现的效果 收缩和展的功能 遵循网页布局,行为,结构,样式 分离 下面是html 结构代码: <div id="drop" class="down_list ...
- jQuery 收缩展开效果
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- jQuery 文本段落展开和折叠效果
jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" c ...
- javascript 文本框值变化触发事件
javascript 文本框值变化触发事件jo.find(".price").bind('input onpropertychange', function () { me.cal ...
- C#使用splitContainer控件制作收缩展开面板
C#使用splitContainer控件制作收缩展开面板 原创 2011年07月19日 17:18:02 标签: c# / object / 扩展 / 测试 15690 最近对Squi ...
- JS收缩展开效果
// 收缩展开效果 $(document).ready(function () { $(".box h2").toggle(function () { $(this).next(& ...
- 多个div的多文本部分展开显示+关键字自动标注
效果: 源码: <%@ page language="java" contentType="text/html; charset=utf-8" pageE ...
- JavaScript文本框焦点事件
效果图如下: <!-- 当文本框获得焦点时候,如果文本框内容是 请输入搜索关键字 清空文本框,输入内容变黑色 --> <!-- 当文本框失去焦点时候,如果文本框无内容,则添加灰色的 ...
随机推荐
- 十四、MySQL UPDATE 查询
MySQL UPDATE 查询 如果我们需要修改或更新 MySQL 中的数据,我们可以使用 SQL UPDATE 命令来操作.. 语法 以下是 UPDATE 命令修改 MySQL 数据表数据的通用 S ...
- LeetCode951-翻转等价二叉树
问题:翻转等价二叉树 我们可以为二叉树 T 定义一个翻转操作,如下所示:选择任意节点,然后交换它的左子树和右子树. 只要经过一定次数的翻转操作后,能使 X 等于 Y,我们就称二叉树 X 翻转等价于二叉 ...
- 【CodeBase】PHP立即输出结果
利用ob_flush输出缓冲区内容 /* *Author:YunGaZeon *usage:streamout($str) */ function streamout($str) { echo str ...
- PHP 作用域
- JZOJ 3382. 【NOIP2013模拟】七夕祭
3382. [NOIP2013模拟]七夕祭 Time Limits: 1000 ms Memory Limits: 131072 KB Detailed Limits Goto Problem ...
- 洛谷P4231 三步必杀
题目描述: $N$ 个柱子排成一排,一开始每个柱子损伤度为0. 接下来勇仪会进行$M$ 次攻击,每次攻击可以用4个参数$l$ ,$r$ ,$s$ ,$e$ 来描述: 表示这次攻击作用范围为第$l$ 个 ...
- python数据模型(特殊方法)
python中的全部特殊方法 本部分内容可以参考官方网址 python中一共有83个特殊方法,其中47个用于算术运算.位运算和比较操作.我根据<流畅的python>中的整理,摘录如下两个表 ...
- excel VBA 将文本数值转换为数字格式(单元格中数据左上角是绿三角,鼠标点上有叹号标示)
Range("A6").SelectSelection.CopyRange("A10:A60").SelectRange(Selection, Selectio ...
- TCP/IP网络编程之地址族与数据序列
分配IP地址和端口号 IP是Internet Protocol(网络协议)的简写,是为收发网络数据而分配给计算机的值.端口号并非赋予计算机的值,而是为区分程序中创建的套接字而分配给套接字的序号 网络地 ...
- day19 Dgango进阶 路由系统及 ORM 详解
完成一个完整的网页服务,需要有以下: 再次回顾一下Django 的完成开发流程: 一些值的获取: 对于性别,为互斥属性: 爱好则为多选: 需要使用新的方法 getlist 来获取多个爱好: 单选下拉框 ...