<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" character .html (). length; // total words Var limit = 100; // display words If (charNumbers> limit) { Var orgText = $ (". content" pai.html (); // Original Text Var orgHeight = $ (". content"). height (); // original height Var showText = orgText. substring (0, limit); // The final displayed text $ (". Content" pai.html (showText ); Var contentHeight = $ (". content"). height (); // The height of the captured content $ (". Switch"). click ( Function (){ If (cur_status = "less "){ $ (". Content" 2.16.height(contentheight).html (orgText). animate ({height: orgHeight}, {duration: "slow "}); ((This).html ("contract "); Cur_status = "more "; } Else { $ (". Content" 2.16.height(orgheight).html (showText). animate ({height: contentHeight}, {duration: "fast "}); ("Expand "); 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;"> This is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text, this is a long text, a long text </Div> <Div class = "switch"> Expand </div> </Div> </Body> </Html> |