WEB前端开发群：17784629
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js深入学习</title> <style> #comment{ margin:0px auto; width:500px;} #comment div{ width:500px; border-bottom:1px solid #ccc; margin:0 0 10px 0; padding:10px 0;} #comment p{ line-height:150%; font-size:12px; color:#0066CC; display:inline;} #comment a{ font-size:12px; color:#999; line-height:150%; margin:0 0 0 10px;text-decoration:underline; display:none; cursor:pointer;} #comment a:hover{text-decoration:none; } </style> </head> <body> <div id="comment"> <div><p>11111111111第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p id="teshu">2222222222222第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>333333333第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>444444444444第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>555555555555第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div> <p>6666666666</p><a>更多>></a></div> <div><p>777777777777第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>888888888888第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>9999999999999第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>1010101010第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>11111111111第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p id="teshu">2222222222222第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>333333333第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>444444444444第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>555555555555第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div> <p>6666666666</p><a>更多>></a></div> <div><p>777777777777第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>888888888888第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>9999999999999第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> <div><p>1010101010第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多>></a><a>收起>></a></div> </div> <script> function checkWords(elementID){ function updata(i){ var elementHtml= elementP[i].innerHTML; var elementLength= elementHtml.length; if( elementLength > 60){ var moreBtn=elementP[i].nextSibling; var closeBtn=moreBtn.nextSibling; elementP[i].innerHTML=(elementP[i].innerHTML.substr(0,60)+'...'); moreBtn.style.display="inline-block"; //查看更多 moreBtn.onclick=function(){ elementP[i].innerHTML=elementHtml; this.style.display="none"; closeBtn.style.display="inline-block"; return false; } //收起查看更多 closeBtn.onclick=function(){ elementP[i].innerHTML=(elementP[i].innerHTML.substr(0,60)+'...'); this.style.display="none"; moreBtn.style.display="inline-block"; return false; } } } var elementDiv= document.getElementById(elementID); var elementP= elementDiv.getElementsByTagName('p'); for( i=0; i<elementP.length; i++){ updata(i); } } </script> <script> checkWords('comment'); </script> </body> </html>
提示：你可以先修改部分代码再运行。
Posted in 前端特效.
Tagged with 土豆, 收缩, 显示.
No comments
By yflintao – 2010年01月29日
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
留下评论 Cancel Some HTML is OK
Name (required)
Email (required, but never shared)
Web
or, reply to this post via trackback.
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.