jQuery实现文本展开收缩特效

2024-05-06 16:21:10

字体：大中小

来源：转载

供稿：网友

在网页上只有一个小区域，但是说明性的文字又很长，下面这段脚本实现的是长文字的部分显示。

当用户点击展开时，文字展开，收缩时文字收缩。

本来用jQuery自带的toggle()就可以写，但是我做的时候 toggle一直不work，所以就用了click + 标志位来做的

<script language="javascript" src="jquery.js"></script>

<script language="javascript">

var cur_status = "less";

$.extend({

show_more_init:function(){

//alert("show_more_init!");

var charNumbers=$(".content").html().length;//总字数

var limit=100;//显示字数

if(charNumbers>limit)

{

var orgText=$(".content").html();//原始文本

var orgHeight=$(".content").height();//原始高度

var showText=orgText.substring(0,limit);//最终显示的文本

$(".content").html(showText);

var contentHeight=$(".content").height();//截取内容后的高度

$(".switch").click(

function() {

if(cur_status == "less"){

$(".content").height(contentHeight).html(orgText).animate({ height:orgHeight}, { duration: "slow" });

$(this).html("收缩");

cur_status = "more";

}else{

$(".content").height(orgHeight).html(showText).animate({ height:contentHeight}, { duration: "fast" });

$(this).html("展开");

cur_status = "less";

}

}

);

}

else

{

$(".switch").hide();

}

}

});

$(document).ready(function(){

$.show_more_init();

});

</script>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<style>

#limittext{

width:640px;

height:auto;

position:relative;

background-color:#ccc;

color:black;

}

.switch{

font-size:12px;

text-align:center;

cursor:pointer;

font-family:Verdana;

font-weight:800;

position:absolute;

bottom:0;

width:100%;

/*background:url(more-bg.png) repeat-x bottom;*/

height:40px;

line-height:80px;

}

</style>

</head>

<body>

<div id="limittext" >

<div class="content" style="padding-bottom:15px;">

这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字

</div>

<div class="switch">展开</div>

</div>

</body>

</html>

方法二：

<!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>

<title>jQuery实现DIV层的收缩展开效果</title>

<script type="text/javascript" src="/images/jquery.js"></script>

<style>

/* 收缩展开效果 */

.text{line-height:22px;padding:0 6px;color:#666;}

.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}

.box{position:relative;border:1px solid #e7e7e7;}

</style>

</head>

<body>

<script type="text/javascript">

// 收缩展开效果

$(document).ready(function(){

$(".box h1").toggle(function(){

$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

},function(){

$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

});

});

</script>



<div class="box">

<h1>收缩展开效果</h1>

<div class="text">

1<br />

2<br />

3<br />

4<br />

5<br />

</div>

</div>

<br />

<div class="box">

<h1>收缩展开效果</h1>

<div class="text">

1<br />

2<br />

</div>

</div>

<br>

<font color=red>第一次运行请刷新一下页面。</font>

</body>

</html>