你的位置:首页 > 网页设计

[网页设计]jQuery实现长文字部分显示代码


在网页上只有一个小区域,但是说明性的文字又很长,下面这段脚本实现的是长文字的部分显示,有类似需求的朋友可以参考下哈,希望对你有所帮助

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

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

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

</div>

<div >展开</div>

</div>

</body>

</html>