制作網(wǎng)頁標(biāo)題鏈接平滑右移效果

上次發(fā)了一篇《分享本站LOGO發(fā)光效果的實(shí)現(xiàn)方法》，不知道有幾個(gè)童鞋用上了，不喜歡的我也沒轍啦，我只是分享我的方法嘛。

今天我要寫的是鼠標(biāo)移動(dòng)到標(biāo)題上，標(biāo)題平滑右移的效果，效果可以看我的主頁。

你還在嫌你的頁面不夠生動(dòng)不夠活力嗎?親，那就看下面的教程折騰起來吧!

第一種方法，用的是jQuery。

優(yōu)點(diǎn)：兼容所有瀏覽器，包括IE什么的。

缺點(diǎn)：代碼也很短，沒什么缺點(diǎn)。

jQuery(document).ready(function($){

$('.entry-title a').hover(function() {

//.entry-title a 改成你標(biāo)題的樣式名稱,可以應(yīng)用多個(gè)鏈接,用逗號(hào)隔開

$(this).stop().animate({'marginLeft': '10px'}, 200);

//鼠標(biāo)移動(dòng)到鏈接上的平滑效果,200是毫秒,就是效果時(shí)間,可以改成你需要的時(shí)間

}, function() {

$(this).stop().animate({'marginLeft': '0px'}, 200);

//鼠標(biāo)離開鏈接后的平滑效果,200同上

});

});

首先第一步要讓主題加載jQuery庫(kù)文件，現(xiàn)在基本上沒有主題沒加載，所以第一步可以省略。

(想要知道有沒有加載這個(gè)庫(kù)文件的童鞋，在網(wǎng)頁查看源代碼中，搜索“jquery.min.js”，如果有就是有加載啦。)

第二步就是將這個(gè)代碼粘貼到主題加載的其中一個(gè)JS文件里，就OK了。

第二種方法，用的是CSS3。

優(yōu)點(diǎn)：效果一樣，沒啥優(yōu)點(diǎn)。

缺點(diǎn)：不兼容IE瀏覽器，在IE下會(huì)右移，但是沒有平滑效果，因?yàn)镮E不支持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;

再給這個(gè)a:hover添加：

margin-left:10px /*移動(dòng)距離可以自己調(diào)節(jié)*/

按以上方法改完就可以看到效果了，兩種方法效果都一樣，但是第一種方法能兼容所有瀏覽器，所以小V墻裂推薦用第一種方法。

當(dāng)前名稱：制作網(wǎng)頁標(biāo)題鏈接平滑右移效果
文章網(wǎng)址：http://www.bm7419.com/news19/324469.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、外貿(mào)網(wǎng)站建設(shè)、App設(shè)計(jì)、網(wǎng)站營(yíng)銷、網(wǎng)站制作、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)