jQuery實現(xiàn)文本展開收縮特效

2024-05-06 16:21:10

字體：大中小

來源：轉載

供稿：網(wǎng)友

在網(wǎng)頁上只有一個小區(qū)域，但是說明性的文字又很長，下面這段腳本實現(xiàn)的是長文字的部分顯示。

當用戶點擊展開時，文字展開，收縮時文字收縮。

本來用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;//總字數(shù)

var limit=100;//顯示字數(shù)

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實現(xiàn)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>