发表于275 天前 | 作者: 心淡若水 | 分类: 博客.技巧 | 支持度: 3,420 views°
Rss Gbookmarks Twitter Facebook Sina Microblog Tencent Microblog QQ-Mail
折騰主題,給主題加入了幾個新的特效功能,主要是做個備忘,也給需要的同學做一個分享,經過測試,這幾個特效都是兼容性還可以的,最起碼我在幾個自用的瀏覽器下使用都沒發現什麽問題,有問題及時反饋溝通
首先:首頁標題加載中提示
這個貌似很多人都用到了,並且基本很多主題裏面都集成了,實現方法挺簡單的,一兩步搞定,需要用的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,兩種調用方法隨便選擇,你的地盤你說了算!
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]) && 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下載地址
突然發現你幻燈片速度太快了。。。。
還是不折騰了
哈哈，亨sir重返你的“天上人間了”
呵呵，歡迎保持互訪，貴博已經上俺家墻了！
我有空就順墻摸來！摸到你的天上人間來！哈哈