JavaScript 實現隱藏省略文字特效 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 
        <title>JS</title> 
    </head> 
<body> 
    <p id="content">有一種心態叫放下;有一種境界叫舍得;有一種幸福叫守候;有一種智慧叫低調;有一種選擇叫放棄;有一種明白叫糊塗;有一種心態叫包容;有一種快樂叫簡單;有一種美德叫微笑;有一種幸福叫珍惜;有一種美麗叫自信;有一種感動叫分享;有一種真情叫關愛;有一種溫暖叫感恩;有一種成功叫堅持。 
    </p> 
 
<script language="javascript">  www.aiwalls.com
    (function(){ 
        var len = 50; // 默認顯示的字數 
        var content = document.getElementById("content"); // content 獲取內容 p 對象 
        var text = content.innerHTML;   // text 為內容 
        var span = document.createElement("span"); // 創建一個 SPAN 標簽 
        var n = document.createElement("a");    // 創建一個 A 標簽 
        span.innerHTML = text.substring(0,len); // SPAN 標簽的內容為 text 的前 len 個字符 
        n.innerHTML = text.length > len ? "..展開" : ""; // 創建的 A 標簽內容,如果內容字數大於 len,那麼為“..展開”,否則為空 
        n.href = "javascript:void(0)";  // 設置 A 標簽的鏈接地址(隨意) 
        n.onclick = function(){ // 點擊 A 鏈接執行下面函數 
        // 如果 A 標簽的內容為“..展開”,那麼 A 標簽內容變成“收起”,SPAN 標簽的內容為 DIV 全部內容,否則內容為前 len 個字符 
        if (n.innerHTML == "..展開"){ 
            n.innerHTML = "收起"; 
            span.innerHTML = text; 
        }else{ 
            n.innerHTML = "..展開"; 
            span.innerHTML = text.substring(0,len); 
        } 
      } 
        content.innerHTML = "";     // 設置 DIV 內容為空 
        content.appendChild(span);  // 把 SPAN 元素加到 DIV 中 
        content.appendChild(n);     // 把 A 元素加到 DIV 中 
    })(); 
</script> 
</body> 
</html> 
        效果圖:

摘自 Lee.的專欄
 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。