Home > Developer > Web Develop
There is only a small area on the Web page, but the descriptive text is very long, the following script implementation is a long text part of the display, there are similar needs of friends can refer to ha, I hope to help you
There is only a small area on the Web page, but the descriptive text is very long, and the following script implements a portion of the long text display.
When the user clicks Expand, the text expands, and the text is closed.
Originally with jquery toggle () will be able to write, but I do when the toggle has been not work, so I use the Click + Flag bit to do
?
<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;//Total Words
var limit=100;//display Word Count
if (charnumbers>limit)
{
var orgtext=$ (". Content"). html ();//Original text
var orgheight=$ (". Content"). Height ();//Original height
var showtext=orgtext.substring (0,limit);//The text that is eventually displayed
$ (". Content"). html (showtext);
var contentheight=$ (". Content"). Height ();//Altitude after intercepting content
$ (". Switch"). Click (
function () {
if (Cur_status = = "less") {
$ (". Content"). Height (contentheight). HTML (orgtext). Animate ({Height:orgheight}, {duration: "slow"});
$ (this). HTML ("Hop Up");
Cur_status = "more";
}else{
$ (". Content"). Height (orgheight). HTML (showtext). Animate ({Height:contentheight}, {duration: "fast"});
$ (this). HTML ("unfold");
Cur_status = "less";
}
}
);
}
Else
{
$ (". Switch"). Hide ();
}
}
});
$ (document). Ready (function () {
$.show_more_init ();
});
</script>
<! DOCTYPE html>
<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>
<body>
<div id= "Limittext" >
<div class= "Content" style= "padding-bottom:15px;" >
This is a long paragraph of text, which is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, which is a long paragraph of text, which is a long paragraph of text, This is a long paragraph of text, which is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, which is a long paragraph of text, which is a long paragraph of text, This is a long paragraph of text, which is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, which is a long paragraph of text, which is a long paragraph of text, This is a long paragraph of text, which is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, which is a long paragraph of text, which is a long paragraph of text, This is a long paragraph of text, which is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, which is a long paragraph of text, which is a long paragraph of text, This is a long paragraph of text, which is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, which is a long paragraph of text, which is a long paragraph of text, This is a long paragraph of text, which is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, which is a long paragraph of text, which is a long paragraph of text, This is a long paragraph of text, which is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, which is a long paragraph of text, which is a long paragraph of text, This is a long paragraph of text, which is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, which is a long paragraph of text, which is a long paragraph of text, This is a long paragraph of text,This is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, this is a long paragraph of text, which is a long paragraph of text, which is a long paragraph of text, which is a long paragraph of text
</div>
<div class= "Switch" > Expand </div>
</div>
</body>
jquery Implements long text section display code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
