在很多的博客上看到了,,鼠標(biāo)過去,,文章列表標(biāo)題抖動右移的效果,。感覺挺炫的,。我試了一下,。在我的博客主題上感覺不太適合,,所以沒有繼續(xù)用,。
不過先收著吧,以后需要的時候也可以繼續(xù)用,。大家可以試試,!
第一種方法:jQuery加載
優(yōu)點:兼容所有瀏覽器,包括IE什么的,。
缺點:代碼也很短,,沒什么缺點。
jQuery(document).ready(function($){$('.entry-title a').hover(function() {//.entry-title a 改成你標(biāo)題的樣式名稱,可以應(yīng)用多個鏈接,用逗號隔開$(this).stop().animate({'marginLeft': '10px'}, 200);//鼠標(biāo)移動到鏈接上的平滑效果,200是毫秒,就是效果時間,可以改成你需要的時間}, function() {$(this).stop().animate({'marginLeft': '0px'}, 200);//鼠標(biāo)離開鏈接后的平滑效果,200同上});});
首先第一步要讓主題加載jQuery庫文件,,現(xiàn)在基本上沒有主題沒加載,,所以第一步可以省略。
(想要知道有沒有加載這個庫文件的童鞋,,在網(wǎng)頁查看源代碼中,,搜索“jquery.min.js”,如果有就是有加載啦,。)
第二步就是將這個代碼粘貼到主題加載的其中一個JS文件里,,就OK了。
第二種方法:CSS3效果
優(yōu)點:效果一樣,,沒啥優(yōu)點,。
缺點:不兼容IE瀏覽器,在IE下會右移,,但是沒有平滑效果,,因為IE不支持CSS3。
先給你標(biāo)題的a標(biāo)簽樣式添加以下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
按以上方法改完就可以看到效果了,,兩種方法效果都一樣,,但是第一種方法能兼容所有瀏覽器,所以推薦使用第一種方法,。