偽ajax之點擊標題時顯示“正在載入中...”

漸入漸出效果

這裡就用漸入漸出效果來舉例子，下面的樣式來自StackOverflow的A.M.K。

代碼如下

複製代碼

.content{     -webkit-animation: fadein 2s; /* Safari and Chrome */        -moz-animation: fadein 2s; /* Firefox */         -ms-animation: fadein 2s; /* Internet Explorer */          -o-animation: fadein 2s; /* Opera */             animation: fadein 2s; } @keyframes fadein {     from { opacity: 0; }     to   { opacity: 1; } } /* Firefox */ @-moz-keyframes fadein {     from { opacity: 0; }     to   { opacity: 1; } } /* Safari and Chrome */ @-webkit-keyframes fadein {     from { opacity: 0; }     to   { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein {     from { opacity: 0; }     to   { opacity: 1; } }​ /* Opera */ @-o-keyframes fadein {     from { opacity: 0; }     to   { opacity: 1; } }​

上面的content就是要漸入漸出的容器，from相當於0%，to就是100%，相信你已經大概想出簡單的使用方法了。

頁面正在載入旋轉效果 戳我

標題正在載入效果

 首先需要載入JQuery，如果你的網站已經載入了就免了

代碼如下

複製代碼

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script> 接著把下面這段代碼加到當前主題的header.php中，＜/head＞標籤之前： <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>a<script type="text/javascript"> $(document).ready(function() { $('h2 a').click(function(){ myloadoriginal = this.text; $(this).text('請稍等，正在努力載入中...'); var myload = this; setTimeout(function() { $(myload).text(myloadoriginal); }, 2011); }); }); </script>

上面"h2 a"如果改成"a"，可以實現全部串連都顯示這一效果。後面的2011是這一特效顯示的時間，單位是毫秒，可酌情修改。
怎麼又水了一文呢。

More：這個載入上的效果都是靠js，依賴jquery，漸入漸出效果依賴css。雖然加上三個後實際上載入速度是慢了，但是感覺上有種好玩很多的感覺。見仁見智吧。出乎意料的是這個旋轉的小球居然不是圖片是用css寫的。標題正在載入最討厭有人點了一個又點一個