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文本框焦点事件
效果图如下: <!-- 当文本框获得焦点时候,如果文本框内容是 请输入搜索关键字 清空文本框,输入内容变黑色 --> <!-- 当文本框失去焦点时候,如果文本框无内容,则添加灰色的 ...
随机推荐
- shell与python判断文件是否存在
日常运维中,我们会存在每日备份的现象,针对这一种情况可能会要求监控文件是否存在.比较笨拙的方法就是登录上服务器到某个路径下查看文件是否存在,除此之外,我们可以利用shell或者python来编写监控文 ...
- centos7.4安装rabbitmq服务(3.7.10版本)
一.需要安装erlang版本依赖,可以使用二进制安装方式,也可以通过rpm安装,但是安装的时候会提示需要erlang版本>=19.3,而且直接默认yum仓库中的版本较低.,为了节省时间,文章中直 ...
- python使用PyQt5,及QtCreator,qt-unified界面设计以及逻辑实现
1.环境安装: 1.安装pyQt5 pip3 install pyQt5 2.安装设计器 pip3 install pyQt5-tools (英文版的) 我是用的是自己Windows上安装的qt ...
- web前端的环境配置
1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源(如html 页 ...
- Oracle两种临时表的创建与使用详解
ORACLE数据库除了可以保存永久表外,还可以建立临时表temporary tables.这些临时表用来保存一个会话SESSION的数据,或者保存在一个事务中需要的数据.当会话退出或者用户提交comm ...
- A1046 Shortest Distance (20)(20 分)
1046 Shortest Distance (20)(20 分)提问 The task is really simple: given N exits on a highway which form ...
- F#周报2019年第25期
新闻 Azure Notebook概览 SpecFlow 3就在这里了! 使用新的Try .NET模版创建交互式文档 逐渐演化的.NET Core框架 Dylan与Linebreakers Oslo ...
- 54、edittext输入类型限制为ip,inputType应该如何设置
<EditText android:id="@+id/et_setting_printer_edit_info_ip" android:layout_width=" ...
- 46、android studio第一次使用时卡在gradle下载怎么解决?
如果没法FQ或者FQ后网速慢,哥教你一个快速解决方案. 在根目录下的.gradle目录下,找到wrapper/dists目录,如果当前正在下载gradle.x.xx-all.zip,那么会发现grad ...
- 对CRC32的小结加上bugku一道题目:好多压缩包
CRC32就是校验值,一般来说不同的文件校验值不一样,所以我们可以挨个爆破,当然这是在文件比较小的时候.下面是几种情形. 1. 我新建了一个flag.txt文档,里面是我的生日20180818 然后我 ...