jQuery实现文本展开收缩特效
在网页上只有一个小区域，但是说明性的文字又很长，下面这段脚本实现的是长文字的部分显示。
当用户点击展开时，文字展开，收缩时文字收缩。
本来用jQuery自带的toggle()就可以写，但是我做的时候toggle一直不work，所以就用了click+标志位来做的
<scriptlanguage="javascript"src="jquery.js"></script>
<scriptlanguage="javascript">
varcur_status="less";
$.extend({
show_more_init:function(){
//alert("show_more_init!");
varcharNumbers=$(".content").html().length;//总字数
varlimit=100;//显示字数
if(charNumbers>limit)
{
varorgText=$(".content").html();//原始文本
varorgHeight=$(".content").height();//原始高度
varshowText=orgText.substring(0,limit);//最终显示的文本
$(".content").html(showText);
varcontentHeight=$(".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>
<!DOCTYPEhtml>
<html>
<head>
<metahttp-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-xbottom;*/
height:40px;
line-height:80px;
}
</style>
</head>
<body>
<divid="limittext">
<divclass="content"style="padding-bottom:15px;">
这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字，这是很长的一段文字
</div>
<divclass="switch">展开</div>
</div>
</body>
</html>
方法二：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery实现DIV层的收缩展开效果</title>
<scripttype="text/javascript"src="/images/jquery.js"></script>
<style>
/*收缩展开效果*/
.text{line-height:22px;padding:06px;color:#666;}
.boxh1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}
.box{position:relative;border:1pxsolid#e7e7e7;}
</style>
</head>
<body>
<scripttype="text/javascript">
//收缩展开效果
$(document).ready(function(){
$(".boxh1").toggle(function(){
$(this).next(".text").animate({height:'toggle',opacity:'toggle'},"slow");
},function(){
$(this).next(".text").animate({height:'toggle',opacity:'toggle'},"slow");
});
});
</script>
<!--收缩展开效果-->
<divclass="box">
<h1>收缩展开效果</h1>
<divclass="text">
1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
</div>
</div>
<br/>
<divclass="box">
<h1>收缩展开效果</h1>
<divclass="text">
1<br/>
2<br/>
</div>
</div>
<br>
<fontcolor=red>第一次运行请刷新一下页面。</font>
</body>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。