您的位置：首页 > Web前端 > JQuery

jQuery实现长文字部分显示代码

2013-05-13 00:00 591 查看

在网页上只有一个小区域，但是说明性的文字又很长，下面这段脚本实现的是长文字的部分显示。
当用户点击展开时，文字展开，合起是文字合起。

本来用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航