• 歡迎訪問奇跡の海網站,本站不上傳任何資源,所有資源均來自于網絡,歡迎加入奇跡の海~!奇跡の海-WordPress QQ群
  • 本站下載資源為網絡上收集整理而來,并且以計算機技術研究交流為目的,版權歸原作者所有,僅供大家參考,學習,不存在任何商業目的與商業用途.
  • 本站系統鏡像均來自于官方原版,ed2k可視為P2P下載鏈接。所有操作系統默認均為試用版,如有正版密鑰可以有效激活,本站不提供任何激活和相關服務。

讓文章標題鏈接添加動態載入效果

WP其他 奇跡の海 2年前 (2017-12-17) 631次瀏覽 已收錄 0個評論 掃描二維碼

簡介

讓文章標題鏈接添加動態載入效果
前端開發中點擊之后的那個動態loading…的效果。兩種的效果到主頁點擊標題就可以看見啦。

實現步驟

第一步

首先第一步要讓網頁加載jQuery庫文件,不過現在基本上沒有什么站沒用到jQuery了,所以第一步可以省略。
但如果沒有添加的話,可以在標簽前加入以下代碼

讓文章標題鏈接添加動態載入效果

<script type="text/javascript" src="http://jqueryjs.googlecode.com  
/files/jquery-1.2.3.min.js"></script>

第二步

第二步就是將下面這個代碼粘貼到網站中加載的其中一個JS文件里,刷新一下,效果就出來了。

/*-------------------------------------------------*/  
/*  為文章標題鏈接添加動態載入效果
/*-------------------------------------------------*/  

$(function() {   
    $('.entry-title a').click(function(e) {   
        e.preventDefault();   
        var htm = 'Loading',   
        i = 4,   
        t = $(this).html(htm).unbind('click'); (function ct() {   
            i < 0 ? (i = 4, t.html(htm), ct()) : (t[0].innerHTML += '.',    
i--, setTimeout(ct, 150))   
        })();   
        window.location = this.href   
    })   
});

代碼說明:

1、$(‘.entry-title a’):單引號內要改成你自己的標題或者其他鏈接的CSS樣式名稱,切記!

2、var htm = ‘Loading’,:單引號內可以改成你想設置的文字。

3、setTimeout(ct, 150)) :150是動態的時間,按需修改。

4、當然,高手可以根據這個來修改更多的樣式。

[整理:CALONYE.COM]


版權聲明:本站所有文章和資源使用CC BY-NC-SA 4.0協議授權發布 , 轉載應當以相同方式注明文章來自“SeaOMC.COM->讓文章標題鏈接添加動態載入效果!在下邊可以分享本文哦!
喜歡 (0)
[]
分享 (0)
奇跡の海
關于作者:
一個WordPress菜鳥!
發表我的評論
取消評論

表情 貼圖 加粗 刪除線 居中 斜體 簽到

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
中国福利彩票36选7开奖结果