在很多的部落格上看到了,滑鼠過去,文章列表標題抖動右移的效果。感覺挺炫的。我試了一下。在我的部落格主題上感覺不太適合,所以沒有繼續用。

不過先收著吧,以後需要的時候也可以繼續用。大家可以試試!

第一種方法:jQuery 載入

優點:相容所有瀏覽器,包括 IE 什麼的。

缺點:程式碼也很短,沒什麼缺點。

jQuery(document).ready(function($){
$('.entry-title a').hover(function() {
//.entry-title a 改成你標題的樣式名稱, 可以應用多個連結, 用逗號隔開
$(this).stop().animate({'marginLeft': '10px'}, 200);
//滑鼠移動到連結上的平滑效果,200 是毫秒, 就是效果時間, 可以改成你需要的時間
}, function() {
$(this).stop().animate({'marginLeft': '0px'}, 200);
//滑鼠離開連結後的平滑效果,200 同上
});
});

首先第一步要讓主題載入 jQuery 庫檔案,現在基本上沒有主題沒載入,所以第一步可以省略。

(想要知道有沒有載入這個庫檔案的童鞋,在網頁檢視原始碼中,搜尋 「jquery.min.js」,如果有就是有載入啦。)

第二步就是將這個程式碼貼上到主題載入的其中一個 JS 檔案裡,就 OK 了。

第二種方法:CSS3 效果

優點:效果一樣,沒啥優點。

缺點:不相容 IE 瀏覽器,在 IE 下會右移,但是沒有平滑效果,因為 IE 不支援 CSS3 。

先給你標題的 a 標籤樣式新增以下 CSS 屬性:

-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-khtml-transition: margin 0.2s ease-out;

再給這個 a:hover 新增:

margin-left:10px  /*移動距離可以自己調節*/

按以上方法改完就可以看到效果了,兩種方法效果都一樣,但是第一種方法能相容所有瀏覽器,所以推薦使用第一種方法。