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文本框焦点事件
效果图如下: <!-- 当文本框获得焦点时候,如果文本框内容是 请输入搜索关键字 清空文本框,输入内容变黑色 --> <!-- 当文本框失去焦点时候,如果文本框无内容,则添加灰色的 ...
随机推荐
- scrapy 圣墟
# -*- coding: utf-8 -*- import scrapy from sx.items import SxItem class SkSpider(scrapy.Spider): nam ...
- U1
如果 activity_main.xml没有xml代码可以对图像右键 go to mxl同时可以在design 和 text 切换 在安装了Android Studio3.3版本之后,第一个He ...
- PAT Basic 1084
1084 外观数列 外观数列是指具有以下特点的整数序列: d, d1, d111, d113, d11231, d112213111, ... 它从不等于 1 的数字 d 开始,序列的第 n+1 项是 ...
- TCP/IP网络编程之多线程服务端的实现(二)
线程存在的问题和临界区 上一章TCP/IP网络编程之多线程服务端的实现(一)的thread4.c中,我们发现多线程对同一变量进行加减,最后的结果居然不是我们预料之内的.其实,如果多执行几次程序,会发现 ...
- Beats、Filebea入门
1. Filebeat配置简介 2. Filebeat收集nginx日志 3. packetbeat简介与演示
- leetcode 【 Best Time to Buy and Sell Stock II 】python 实现
题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...
- 【SCOI 2010】股票交易
题目 最近 \(\text{lxhgww}\) 又迷上了投资股票,通过一段时间的观察和学习,他总结出了股票行情的一些规律. 通过一段时间的观察,\(\text{lxhgww}\) 预测到了未来 \(T ...
- IOS开发学习笔记009-OC基本知识
开始学习OC,时间不等人啊,要抓紧了. OC基本知识 新建一个以.m结尾的文件,这既是oc的程序文件.在oc程序中完全兼容C语言.编译好链接类似. oc包含头文件是使用#import <> ...
- Python-S9-Day128——算法基础Algorithm
01 算法基本概念与递归: 02 二分查找与LOW B三人组 03 快速排序 04 归并排序 01 算法基本概念与递归: 1.1 算法概念 1.2 复习:递归 1.3 时间复杂度 1.4 空间复杂度 ...
- sql2005 和sql2008 同时安装
Hkey_local_machine\Software\Wow6432Node\Microsoft\Microsoft SQL Server\90\Tools\ShellSEM 中的ShellSEM重 ...