仿土豆网文字评论查看效果

脚本代码

<!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>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p id="teshu">2222222222222第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p>333333333第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p>444444444444第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p>555555555555第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
   <div> <p>6666666666</p><a>更多&gt;&gt;</a></div>
   <div><p>777777777777第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p>888888888888第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p>9999999999999第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p>1010101010第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p>11111111111第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p id="teshu">2222222222222第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p>333333333第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p>444444444444第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p>555555555555第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
   <div> <p>6666666666</p><a>更多&gt;&gt;</a></div>
   <div><p>777777777777第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p>888888888888第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p>9999999999999第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</a></div>
    <div><p>1010101010第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧第一行，若果大于500个字，就声乐了。大家一起试试吧</p><a>更多&gt;&gt;</a><a>收起&gt;&gt;</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>

当前页面所处路径为共享世纪 / 脚本特效 / 文本操作 / ，本特效的Tag为：共享世纪

兼容火狐，ie6，ie7， ie8。
点击“更多”查看效果。

会员登陆close X