建站常识

JS 隐藏省略文字特效

发布时间 | 2014/7/12  点击 | 

<style type="text/css">
big{ background:#FFFFFF; border:1px #ddd solid; width:100px; height:30px; display:block; line-height:30px; text-align:center; cursor:pointer;}
</style>

<div id="hutia">
Dr. Pizza是中国比萨商业咨询的领导品牌,为比萨经营者提供技术、产品、运营、投资等全方位的咨询服务。我们努力推动中国比萨商业环境以及比萨文化的发展,帮助中国自主比萨品牌有效提高品牌影响力,获得更好的商业发展空间。为此,我们开放自己、变革自己、挑战自己,以适应中国比萨行业不断发展的未来! 网址:www.chinadrpizza.com
</div>

<script>
(function(){
  var o = document.getElementById("hutia");
  var s = o.innerHTML;
  var p = document.createElement("span");
  var n = document.createElement("big");
  p.innerHTML = s.substring(0,100);
  n.innerHTML = s.length > 100 ? "展开" : "";
  n.href = "###";
  n.onclick = function(){
    if (n.innerHTML == "展开"){
      n.innerHTML = "收起";
      p.innerHTML = s;
    }else{
      n.innerHTML = "展开";
      p.innerHTML = s.substring(0,100);
    }
  }
  o.innerHTML = "";
  o.appendChild(p);
  o.appendChild(n);
})();
</script>

相关信息