焚花祭秋 » WodPress 利用Jquery實現圖片顯隱,標題加載中提示等特效

WodPress 利用Jquery實現圖片顯隱,標題加載中提示等特效

作者：焚花祭秋 / 发布时间：August 17, 2011 / 分类：博客.技巧 / 116 Comments

折騰主題,給主題加入了幾個新的特效功能,主要是做個備忘,也給需要的同學做一個分享,經過測試,這幾個特效都是兼容性還可以的,最起碼我在幾個自用的瀏覽器下使用都沒發現什麼問題,有問題及時反饋溝通

首先:首頁標題加載中提示

這個貌似很多人都用到了,並且基本很多主題裏面都集成了,實現方法挺簡單的,一兩步搞定,需要用的jquery-1.2.3.min在文章下面有下載地址,大家選擇調用谷歌的還是本地的可以根據個人喜好自己選擇,PS:很多主題都已經調用了就忽略不計好了!

在header.php 加入以下代碼搞定!就是這麼簡單

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('h2 a').click(function(){
myloadoriginal = this.text;
$(this).text('文章加載中...');
var myload = this;
setTimeout(function() { $(myload).text(myloadoriginal); }, 2011);
});
});
// ]]></script>

這是調用的jquery-1.2.3.min,兩種調用方法隨便選擇,你的地盤你說了算!

1 2	http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js--調用路徑,格式自改 <!--?php bloginfo('stylesheet_directory'); ?-->/js/jquery.min.js--調用路徑,格式自改

其次:博客圖片漸隱或者清晰顯示

這個有兩個可以選擇,還是那句話,根據自己的喜好選擇,其中一個是圖片是清晰的,鼠標指向變模糊,也就是本博客現在用的,另外一種就是博客圖片成模糊狀,鼠標指向變清晰,這個沒什麼好說的了,直接選擇套用即可,這個特效用到的jquery-1.2.3.min下載地址也是在文章末,同上面的特效用到的是同一個,選擇用谷歌還是本地調用,自己選擇,調用方法自己添加即可!

01:博客圖片清晰指向變模糊

<script type="text/javascript">// <![CDATA[
$(function () {
$('img').hover(
function() {$(this).fadeTo("fast", 0.5);},
function() {$(this).fadeTo("fast", 1);
});
});
// ]]></script>

02:博客圖片模糊指向變清晰

<script type="text/javascript">// <![CDATA[
$(function() {
$('img').animate({"opacity": .5 });
 
$('img').hover(function() {
$(this).stop().animate({ "opacity": 1 });
}, function() {
$(this).stop().animate({ "opacity": .5 });
});
});
// ]]></script>

最後:新訪問者發表評論填入郵箱即時顯示Avatar頭像

前提條件是郵箱已經註冊了Avatar並且設置了頭像,這個主要是針對新用戶,因為回頭客已經有記錄,並且回頭客也不需要再重新填寫郵箱等諸如此類一些多余的行為,這個所需要的realgravatar.js在文章末有下載地址,依舊是選擇用谷歌的還是本地的自己做決定,這句話其實比較多余,很多人都知道的飄過,我下面的代碼是以調用本地舉例的,請註意哦

講下面這段代碼直接添加到comment.php模板裏合適的位置即可,也就是填寫郵箱後面就可以了,當然,你想添加到其他位置也行,只要能調用的了就OK了,依舊這麼簡單

<!--?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH])
 &#038;& isset($_COOKIE['comment_author_'.COOKIEHASH]))  : ?-->
 
<!--?php else:?-->
<!--?php bloginfo('template_url'); ?-->/scripts/realgravatar.js--調用路徑,格式自改
 
<!--?php endif; ?-->

如果想控制位置加背景什麼的可以通過修改一下CSS代碼實現

#commentwelcome{margin:10px;}
#real-avatar .avatar{position:relative;right:130px;top:10px;
border:1px solid #ccc; background:#fff;
width:50px; height:50px; padding:2px; float:right;}

OK,全部搞定了,所有演示效果看本博客就OK了,其他沒啥說的了,不接受噴水,有問題留言,一切淡定,淡定,下面是兩個特效所需要的JS下載地址

[Downlink href="http://www.kuaipan.cn/file/id_19007936114196512.html"]realgravatar.js[/Downlink]

[Downlink href="http://www.kuaipan.cn/file/id_19007936114196511.html"]jquery-1.2.3.min[/Downlink]

哇!已經有116枚讓人不淡定的評論! »

win8迷

October 12th, 2011 At Wednesday 09:07 AM ReplyTa

突然發現你幻燈片速度太快了。。。。
小柒

September 16th, 2011 At Friday 01:25 AM ReplyTa

博客越來越華麗了。
亨sir

September 11th, 2011 At Sunday 04:45 PM ReplyTa

還是不折騰了
哈哈，亨sir重返你的“天上人間了”
呵呵，歡迎保持互訪，貴博已經上俺家墻了！
我有空就順墻摸來！摸到你的天上人間來！哈哈
殺手時代

September 10th, 2011 At Saturday 10:00 AM ReplyTa

這個博客模板做的太好看了....
福州婚紗攝影

August 29th, 2011 At Monday 07:56 AM ReplyTa
毛豆網

August 29th, 2011 At Monday 06:18 AM ReplyTa

毛豆收下了，毛豆有時間就好好研究下吧
hostgator

August 26th, 2011 At Friday 10:38 AM ReplyTa

嗯博主寫得好
Rubinz

August 25th, 2011 At Thursday 05:34 PM ReplyTa

首頁標題加載中提示為什麼在我的主題沒效果？人太笨？
1. 沫
  
  August 26th, 2011 At Friday 03:47 AM ReplyTa
  
  @Rubinz的回覆
  
  @Rubinz:
  代碼我看了下沒錯
  是不是JS加載錯了?
  我寫的是沒有尖括號的
  其實是應該有的
  如果還不行我直接發我的給你
  你試試我添加的時候是直接復制上去就可以用了的
  1. Rubinz
    
    August 26th, 2011 At Friday 05:56 AM ReplyTa
    
    @沫的回覆
    
    @沫: 等你有時間，QQ上說，還有你的郵件咋跑到我垃圾箱去了