制作網頁標題鏈接平滑右移效果

2024-04-20 分類：網站建設

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

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

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

第一種方法，用的是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 /*移動距離可以自己調節*/

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

當前名稱：制作網頁標題鏈接平滑右移效果
文章網址：http://m.kartarina.com/news19/324469.html

成都網站建設公司_創新互聯，為您提供定制開發、外貿網站建設、App設計、網站營銷、網站制作、自適應網站

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

猜你還喜歡下面的內容