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

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

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

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

第一種方法，用的是jQuery。

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

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

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

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

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

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

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

}, function() {

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

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

});

});

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

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

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

第二種方法，用的是CSS3。

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

缺點(diǎn)：不兼容IE瀏覽器，在IE下會(huì)右移，但是沒(méi)有平滑效果，因?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)前名稱(chēng)：制作網(wǎng)頁(yè)標(biāo)題鏈接平滑右移效果
文章網(wǎng)址：http://muchs.cn/news19/324469.html

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

廣告

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