在需要的时候用javascript收缩文本高度，并渐进展开

yukaizhao

浏览: 235440 次
性别:
来自: 北京

最近访客更多访客>>

qq849397558

ut7gs1x5

z2042489

Epyon_36959

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript 生活游戏 IE Firefox

在显示图书目录的时候，往往拉的页面很长，用户一眼看不到边，这样用户体验不好，所以经常可以看看“继续阅读”的链接。

它是如何实现的呢，其实就是用js检测块的高度，如果高度超过一定数，则修改文本块的高度，并设置overflow:hidden，然后再创建一个继续阅读的连接放在下面用来展开所有内容。

js代码如下，代码在ie和firefox下测试通过：

function doShrink(oshrink,maxHeight){
    if(oshrink){
        var oH = (oshrink.clientHeight||oshrink.offsetHeight);
        if(oH>maxHeight){
            var link = document.createElement("a");
            var div = document.createElement("div");
            div.className = "smallA";
            div.innerHTML = "…………<br />"
            text = document.createTextNode("[点击查看更多内容]");
            link.href = "javascript:void(0)";
            link.onclick = function(e) { shrinkShow(this); }
            link.appendChild(text);
            div.appendChild(link);
            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 shrinkShow(obj) {
    var omore = obj.parentNode;
    var ohide = omore.previousSibling;
    ohide.style.height  = ohide.srcHeight + 'px';
    ohide.style.maxHeight  = ohide.srcHeight + 'px';
    remove(omore);
}

在这个地址你可以看到形象的测试效果图

--------------------

下面内容为4月27日新添加内容

--------------------

评论中有朋友提出逐步放开被隐藏内容的高度，下面是我的实现代码，doShrink函数不变：

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;
        }
    }
}

逐步打开的效果，请看这里：0-1岁宝宝养育全书

6
顶

0
踩

分享到：

猪流感全面解析 | 生活需要精打细算，在线买书要比价,当当卓 ...

2009-04-24 10:59
浏览 2809
评论(8)
分类:Web前端
查看更多

8 楼 yukaizhao 2009-05-04

tutu1982 写道

如果你伸缩的内容下面还有其它内容你怎么处理呢

下面有内容不是问题，在收缩的时候下面的内容上提，在展开的时候下面的内容向下扩展，请看下面的例子：
http://www.baobaoyunli.com/books/0/0_1suibaobaoyangyuquanshu_51.aspx

7 楼 tutu1982 2009-04-30

如果你伸缩的内容下面还有其它内容你怎么处理呢

6 楼 yukaizhao 2009-04-27

实现了一下逐步展开，并添加到了原文中。

5 楼 yukaizhao 2009-04-27

可以把原本的高度作为一个属性放到div对象中，然后在扩展的时候用setInterval逐步增加高度就可以了。

4 楼 energykey 2009-04-24

else
{
stopCreate();
[color=red][b]obj.style.height="auto";[/b][/color]
}

我加了一句这个，呵呵，居然出现了神奇的效果哦~
这个应该是属于博主的山寨版实现了哦！！！比较容易理解的哇咔咔

3 楼 energykey 2009-04-24

<html>
<head>
<link href="home.css" rel="stylesheet" type="text/css" media="screen, projection" charset="utf-8" />
</head>
<body>
<div id="menu" style="clear:both;height:20%;overflow: hidden;">
<br>孕期保健——我要做妈妈了
<br>第一篇 孕前的准备
<br>1、什么时候当妈妈好
<br>2、怎样调适孕前生活节律
<br>3、孕前营养储备有哪些
<br>4、哪个季节适于怀孕
<br>5、怎样选择受孕时机
<br>6、哪些情况下不宜怀孕
<br>7、什么样的夫妻不宜生育
<br>8、多次人工流产会产生哪些不良后果
第二篇 怀孕早期
<br>9、怀孕的征兆有哪些
<br>10、怎样推算宝宝的生日
<br>11、孕早期胎儿有什么特点
<br>12、为什么说产前检查很有必要
<br>13、孕早期要做哪些检查
<br>14、孕早期的日常生活要注意什么
<br>15、孕早期可以做哪些运动
<br>16、怎样保证孕早期的营养
<br>17、为什么要补充叶酸
<br>18、为什么孕期补充铁剂很重要
<br>19、呕吐得特点厉害怎么办
<br>20、电脑对孕妇有影响吗
<br>21、孕妇能做放射线检查吗
<br>22、什么是TORCH感染
<br>23、孕期可用哪些疫苗
<br>24、孕妇用药要注意什么
<br>25、妊娠期的安全用药包括哪些
<br>26、对胎儿有不良影响的药物有哪些
<br>27、有哪些中药不宜在孕期服用
<br>28、妈妈吸烟喝酒对胎儿有哪些不良影响
<br>29、孕妇的饮品有什么限制
<br>30、孕期为什么要避免噪音污染
<br>31、孕期夫妻性生活还能继续吗
<br>32、孕早期的性生活要注意什么
<br>33、孕早期阴道出血的常见原因有哪些
第三篇 怀孕中期
第四篇 怀孕晚期
第五篇 临产和分娩
孕期饮食——为宝宝吃好每一餐
产后保健——妈妈开心坐月子
母乳喂养——让宝宝更健康
婴幼儿护理——关注宝宝每一天
婴幼儿常见病——愿宝宝健康成长
亲子儿歌百首
亲子故事百篇
亲子游戏百种
</div>
<div id="showMore">
<a href="javascript:showMore();">点击查看更多</a>
</div>
<script type="text/javascript">

function showMore(){
var menu=document.getElementById("menu");
//alert(menu.style.height);
//alert(eval(menu.style.height*100+10)+"%");
//menu.style.height=eval(menu.style.height*100+10)+"%";
startCreate();
}

var heightTimer=null;
var count=20;
function startCreate(){
var obj=document.getElementById("menu");
var maxheight=1000;

if(count<100)
{
obj.style.height=count+"%";
count=eval(count+1);
}
else
{
stopCreate();
}

heightTimer=setTimeout("startCreate()",10);
}

function stopCreate(){
clearTimeout(heightTimer);
document.getElementById("showMore").style.display="none";
}

</script>

</body>

</html>

我像这样控制实现了渐变效果，但这里的100%好像是页面的百分之百，能不能帮我优化一下？我对Js不怎么在行，呵呵，，，你的Js里那些属性我从来没有用到过哦。。。

2 楼 yukaizhao 2009-04-24

谢谢建议。

1 楼 energykey 2009-04-24

以前用自定义标签通过限制字数实现控制高度的，呵呵。不过作用和这个有一些差别，，，这个展开的时候建议做一个渐变效果，现在这样一下闪出来了，眼睛都看懵了。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip: 【优质项目推荐】 1、项目代码均经过严格本地测试，运行OK，确保功能稳定后才上传平台。可放心下载并立即投入使用，若遇到任何使用问题，随时欢迎私信反馈与沟通，博主会第一时间回复。 2、项目适用于计算机相关专业（如计科、信息安全、数据科学、人工智能、通信、物联网、自动化、电子信息等）的在校学生、专业教师，或企业员工，小白入门等都适用。 3、该项目不仅具有很高的学习借鉴价值，对于初学者来说，也是入门进阶的绝佳选择；当然也可以直接用于毕设、课设、期末大作业或项目初期立项演示等。 3、开放创新：如果您有一定基础，且热爱探索钻研，可以在此代码基础上二次开发，进行修改、扩展，创造出属于自己的独特应用。欢迎下载使用优质资源！欢迎借鉴使用，并欢迎学习交流，共同探索编程的无穷魅力！基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip

六一儿童节快乐！（六一儿童节庆祝代码）Vue开发: 六一儿童节快乐！（六一儿童节庆祝代码）Vue开发 like Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes files npm run lint Customize configuration

uniapp聊天工具源码.zip: 提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。适用人群：这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。使用场景及目标：在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。其他说明：为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。

NX二次开发uc1603 函数介绍: NX二次开发uc1603 函数介绍，Ufun提供了一系列丰富的 API 函数，可以帮助用户实现自动化、定制化和扩展 NX 软件的功能。无论您是从事机械设计、制造、模具设计、逆向工程、CAE 分析等领域的专业人士，还是希望提高工作效率的普通用户，NX 二次开发 Ufun 都可以帮助您实现更高效的工作流程。函数覆盖了 NX 软件的各个方面，包括但不限于建模、装配、制图、编程、仿真等。这些 API 函数可以帮助用户轻松地实现自动化、定制化和扩展 NX 软件的功能。例如，用户可以通过 Ufun 编写脚本，自动化完成重复性的设计任务，提高设计效率；或者开发定制化的功能，满足特定的业务需求。语法简单易懂，易于学习和使用。用户可以快速上手并开发出符合自己需求的 NX 功能。本资源内容提供了丰富的中英文帮助文档，可以帮助用户快速了解和使用 Ufun 的功能。用户可以通过资源中的提示，学习如何使用 Ufun 的 API 函数，以及如何实现特定的功能。

【目标检测数据集】遥感类军用飞机检测数据集3800张20类别VOC+YOLO格式.zip: 【目标检测数据集】遥感类军用飞机检测数据集3800张20类别VOC+YOLO格式.zip 数据集格式：Pascal VOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：3821 标注数量(xml文件个数)：3821 标注数量(txt文件个数)：3821 标注类别数：20 标注类别名称:["A1","A2","A3","A4","A5","A6","A7","A8","A9","A10","A11","A12","A13","A14","A15","A16","A17","A18","A19","A20"] 每个类别标注的框数： A1 框数 = 1646 A2 框数 = 1726 A3 框数 = 1164 A4 框数 = 642 A5 框数 = 1262 A6 框数 = 436 A7 框数 = 680 A8 框数 = 944 A9 框数 = 1073 A10 框数 = 924 A11 框数 = 501 A12 框数 = 702 A13 框数 = 1652 A14 框数 = 177

grpcio-1.64.0-cp38-cp38-win_amd64.whl: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

Kan网络pytorch的实现: 权重替换：KAN网络通过将权重参数替换为可学习的单变量函数，提高了网络的性能和可解释性。这种设计使得KAN网络在准确性和可解释性方面优于传统的多层感知器（MLP）。激活函数位置：与传统的MLP不同，KAN网络中的激活函数位于网络的“边”（即权重）上，而不是节点上。这使得KAN网络能够更灵活地调整每个连接上的激活函数，从而提高模型的表示能力。非线性核函数：KAN网络可以使用非线性核函数来替代MLP“边”上的线性函数，进一步增强了模型的非线性处理能力。逼近精度：KAN网络可以设定细粒度的结点（Knot）来提高逼近精度，这使得KAN网络在处理复杂任务时能够获得更高的准确度。 KAN网络的数学理论基础主要来自于Kolmogorov-Arnold表示定理。该定理指出，任意一个多变量连续函数都可以表示为有限数量的单变量连续函数的两层嵌套加法的形式。KAN网络正是基于这一定理，通过将多元函数的学习转化为对一组单变量函数的学习，提高了模型的表达能力和计算效率。

MySQL的performance-schema详解.md: MySQL的performance_schema详解.md

基于python的运动员数据分析源码.zip: 基于python的运动员数据分析源码.zip 基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip基于python的运动员数据分析源码.zip

数字图像处理-实验一：采样与量化.rar: 内容概要：这份资源是一份关于“图像的采样与量化”的实验文档，详细记录了在MATLAB环境下进行图像处理的实验过程。文档中介绍了实验的目的、内容、所需仪器与设备，以及实验原理，包括采样和量化的基本概念和它们在图像处理中的重要性。此外，还提供了MATLAB代码示例，展示了如何对图像进行不同程度的采样和量化，并分析了实验结果。适用人群：本文档适用于学习数字图像处理的大学生、研究生，以及相关专业的研究人员和开发人员。特别是对MATLAB编程和图像处理技术感兴趣的初学者，可以通过这份文档快速入门并理解图像采样与量化的基本原理。使用场景及目标：在学术教学中，作为图像处理课程的实验教材或辅助资料。作为自学者的实践指南，帮助学习者通过动手实践来掌握图像采样和量化的技能。为研究人员提供图像处理技术的理论基础和编程实践，以支持更高级的研究工作。

基于云函数的小程序-初恋.rar: 基于云函数的小程序-初恋.rar

V4L2示例代码，测试通过: V4L2示例代码

机器学习数据 (1).xlsx: 机器学习数据 (1)

MATLAB是一种高级的编程语言和交互式环境: matlab仿真

猫狗动物声音模拟器微信小程序源码带流量主: 这是一款声音模拟器准确说是猫和狗的声音模拟器该款小程序也就没有后端了使用方法直接用微信开发者工具打开源码上传提交审核即可无需过段复杂的过程,文字图片那些都可以自行修改啥的

基于matlab的甲状腺超声图像预处理程序-计算机专业精品课程设计: 该程序是一个数据预处理的模板，它可以生成任意图像对应的二值图。本代码以甲状腺结节知名数据集DDTI为例子。代码运行后，你会得到两个文件夹和一个cvs文件： - 这两个文件夹名为 `stage1` 和 `stage2`, 文件夹`stage1`中的数据用于训练第一个网络，该网络包含预处理后的图像，没有不相关区域； `stage2`用于训练第二个网络，该网络包含扩展ROI的图像 - 名为 `train.csv`的cvs文件是下面的这种数据格式,结节的大小是将预处理后的图像统一为256x256像素后，结节的像素数。

Java开发案例-springboot-20-整合Forest实现调用第三方接口-源代码+文档.rar: Java开发案例-springboot-20-整合Forest实现调用第三方接口-源代码+文档.rar Java开发案例-springboot-20-整合Forest实现调用第三方接口-源代码+文档.rar Java开发案例-springboot-20-整合Forest实现调用第三方接口-源代码+文档.rar Java开发案例-springboot-20-整合Forest实现调用第三方接口-源代码+文档.rar Java开发案例-springboot-20-整合Forest实现调用第三方接口-源代码+文档.rar Java开发案例-springboot-20-整合Forest实现调用第三方接口-源代码+文档.rar Java开发案例-springboot-20-整合Forest实现调用第三方接口-源代码+文档.rar

科帮网javaWeb计算机配件报价系统项目.zip: 科帮网javaWeb计算机配件报价系统项目

深度学习之yolov10目标检测onnx模型之yolov10l.onnx: yolo目标检测onnx模型

android网络视频播放器.zip: android studio android网络视频播放器 android网络视频播放器 android网络视频播放器

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论