`

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

JavaScript生活游戏IEFirefox 
阅读更多

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

 

它是如何实现的呢，其实就是用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
踩
分享到：
| 生活需要精打细算，在线买书要比价,当当卓 ...
评论
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  
以前用自定义标签通过限制字数实现控制高度的，呵呵。不过作用和这个有一些差别，，，这个展开的时候建议做一个渐变效果，现在这样一下闪出来了，眼睛都看懵了。
发表评论

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

相关推荐

    多行文本展示折叠与展开

    4. **Vue/React等前端框架**: 在使用Vue、React等现代前端框架时，可以通过状态管理来控制文本的折叠和展开，结合组件化思想，可以创建高度复用和可配置的折叠组件。 5. **响应式设计**: 考虑到不同设备的屏幕尺寸...

    用javascript做的文本编辑器

    根据提供的信息，我们可以总结出以下有关使用JavaScript创建文本编辑器的知识点： ### 一、文本编辑器概述 在现代Web开发中，文本编辑器是非常重要的工具之一，它可以帮助用户更直观地编辑和格式化文本内容。通过...

    jQ 展开收缩效果

    为了增加用户体验，我们还可以在展开收缩过程中添加过渡动画，如淡入淡出效果。这可以通过`fadeToggle()`方法实现： ```javascript $("#toggleButton").click(function() { $("#contentArea").fadeToggle("slow");...

    javascript 多层嵌套的一个层展开、收缩实例

    在JavaScript编程中，多层嵌套的展开与收缩是一个常见的需求，特别是在构建可交互的用户界面，如树形结构、折叠菜单或者层级数据展示时。本文将深入探讨如何使用JavaScript实现这一功能，以及相关的技术要点。 首先...

    javascript获取选中文本

    javascript获取选中文本的测试脚本，选中文本时产生一个按钮，点击按钮显示文本内容

    多图片展开与收缩

    在本文中，我们将深入探讨如何使用原生JavaScript实现多图片的展开与收缩效果。这个功能在Web前端开发中经常被用到，特别是在构建交互式的图片展示应用时。我们将重点讲解JavaScript的基本语法、DOM操作以及事件处理...

    jQuery展开收缩效果

    可以预先设定两个图标，然后在展开和收缩时通过修改元素的`class`来切换： ```javascript $("#toggleBtn").click(function() { var $icon = $(this).find("i"); if ($icon.hasClass("fa-angle-down")) { $icon....

    javascript富文本框

    通常，富文本框会用一个不可见的`&lt;iframe&gt;`或`&lt;div&gt;`来承载文本内容，利用CSS和JavaScript模拟文本编辑器的界面，并提供事件处理和API接口，使得开发者可以控制用户的输入行为。 ### 二、富文本框库 1. **CKEditor...

    用 HTML + JavaScript 打造的渐进式延迟法定退休年龄测算器

    这个测算器的功能可能涵盖了接收用户的出生年份、性别、当前年龄、职业类型等信息，并根据国家政策规定的变化，计算出用户在渐进式延迟退休制度下的实际退休年龄。它不仅能够帮助用户了解自己的退休时间点，还可能...

    网易javascript富文本编辑器，很好很强大

    综上所述，网易的JavaScript富文本编辑器提供了一套完整的解决方案，用于在网页中创建功能强大的文本编辑环境，并且具有高度的定制性和灵活性，适合各种类型的Web应用集成。通过深入研究和使用提供的文件，开发者...

    JAVASCRIPT让IFRAME框架的高度自适应

    在这篇文章中，我们将介绍使用JavaScript来让IFRAME框架的高度自适应的方法。首先，我们需要定义一个函数来获取当前页面的高度。这个函数可以使用document.body.offsetHeight或document.body.scrollHeight来获取页面...

    javascript 做的 树形展开控件

    在构建这个树形控件时，我们可以使用JavaScript对象表示树的节点，每个节点包含自身的文本、子节点数组以及状态（如是否展开）。当用户点击节点时，对应的事件处理器会检查节点的状态并动态地添加或删除子节点的DOM...

    jsdiff一个javascript的文本差异比较实现

    **jsdiff：JavaScript文本差异比较库** jsdiff是一款基于JavaScript的开源库，它提供了一种高效的方法来比较两个文本字符串之间的差异。这个库被广泛应用于版本控制系统、代码审查工具、协同编辑系统等领域，帮助...

    vue.js 构建用户界面的渐进式框架

    Vue.js 是一套构建用户界面的渐进式框架。分享在这里方便大家使用。

    循序渐进的javascript范例资料

    总的来说，这份“循序渐进的JavaScript范例资料”涵盖了JavaScript从基础到进阶的各个方面，通过实例学习，你将能够深入理解并熟练运用这门语言，从而在Web开发领域游刃有余。无论你是刚接触JavaScript的新手，还是...

    html5手机端动画展开收缩导航菜单特效.zip

    可能使用了CSS3的过渡（transition）和动画（animation）属性来实现平滑的展开和收缩效果。同时，CSS还可能使用媒体查询（media queries）来确保菜单在不同屏幕尺寸下的响应式布局。 压缩包中的"js"文件夹可能包含...

    jquery 展开的同时收缩其他的菜单

    3. 在事件处理函数中，判断当前子菜单的状态并执行相应的展开或收缩操作。 4. 使用`slideUp`和`slideDown`方法添加平滑的动画效果。 通过这样的方式，你可以创建一个交互性强且易于管理的菜单系统，提高用户的浏览...

    十、Vue实战（渐进式JavaScript框架）

    Vue是渐进式JavaScript框架，官方定义为“渐进式”是因为Vue可以根据项目需求逐步增加功能，而不需要从头开始构建整个框架。Vue框架的主要特点是易用、高效、灵活，可以快速开发前端页面。 Vue入门 要开始使用Vue，...

    div做展开收缩内容效果

    在实际应用中，还可以添加更复杂的逻辑，比如设置计时器自动收起、记忆用户上次的选择状态，或者在展开收缩过程中加载更多数据等。同时，要注意响应式设计，确保在不同设备和屏幕尺寸上都能良好地工作。 总之，利用...

    JS树形结构菜单展开收缩代码.zip

    在JavaScript编程中，树形结构是一种常见的数据组织方式，它模拟了自然界中的树状关系，常用于构建层次化的导航菜单。Vue.js是一个流行的前端框架，它提供了强大的组件化能力，使得构建可交互的用户界面变得简单高效...

Magicbox
Global site tag (gtag.js) - Google Analytics