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

2024-04-20 分類：網(wǎng)站建設(shè)

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

今天我要寫的是鼠標移動到標題上，標題平滑右移的效果，效果可以看我的主頁。

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

第一種方法，用的是jQuery。

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

缺點：代碼也很短，沒什么缺點。

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

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

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

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

//鼠標移動到鏈接上的平滑效果,200是毫秒,就是效果時間,可以改成你需要的時間

}, function() {

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

//鼠標離開鏈接后的平滑效果,200同上

});

});

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

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

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

第二種方法，用的是CSS3。

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

缺點：不兼容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 /*移動距離可以自己調(diào)節(jié)*/

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

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

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

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

猜你還喜歡下面的內(nèi)容

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

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