制作網頁LOGO發光效果教程

這個主題的LOGO原本就只是一張靜態圖片而以，沒有什么動態效果，顯得有些過于低端，哈哈。于是就想著修改這個LOGO，能不能加一些動態樣式，最初的修改方法是把a標簽的的背景改成原始LOGO，然后加個a:hover的樣式，使背景替換成事先做好的有發光效果的LOGO圖片。這種方法雖然可以實現發光變化，但是變化的過程太生硬啦，這，不是想要的。

于是想到了能不能用JQ來實現，當然，實驗結果就是現在的樣式啦，還是很滿意的。

先說說這個方法的原理吧。

這個JQ代碼會在a標簽里動態添加一個span標簽，CSS中，a標簽的背景設置為默認LOGO，span的的背景設置為有發光效果的LOGO，a和span是在坐標相同的兩層位置，也就是說他們的背景是完全重疊的。然后就利用JQ腳本，設置span的透明度初始值為完全透明，當鼠標移上之后，會在設置的時間內慢慢變成不透明，就完成了這個效果。

具體教程在下面：

第一步，首先你必須得有做好的兩張LOGO，對吧？類似下圖這樣。不要跟我說不知道怎么做發光效果，親，請百度吧，很簡單。

默認LOGO和發光LOGO

第二步，就是修改相應的代碼和CSS。

一般大部分主題都是用a標簽里面包含img標簽來實現LOGO顯示的吧。將img標簽去掉。代碼如下。

然后修改CSS樣式，例子如下。

.logo-link {display:block;width:190px;height:190px;background:url(默認LOGO地址);}        
.logo-link span.hover {display:block;width:190px;height:190px;background:url(發光LOGO地址);}

第三步，修改JS文件，添加JQ代碼。

基本上每個主題都會加載一些JS的，隨便找個每個頁面都會用的JS文件，打開添加下列代碼：

jQuery(document).ready(function(){  
            jQuery('.logo-link,').wrapInner('').css('textIndent','0').each(function () {  
                jQuery('span.hover').css('opacity', 0).hover(function () {  
                    jQuery(this).stop().fadeTo(600, 1);  
                }, function () {  
                    jQuery(this).stop().fadeTo(600, 0);  
                });  
            });  
}); 

注意，jQuery('.logo-link,')這段中的.logo-link要換成你自己設置的a標簽的class名稱。

OK，方法大致就是這樣，需要注意的就是CSS文件和JS文件中的樣式名稱要一致。

本文只是提供一個方法思路，具體的操作要按你主題的實際代碼情況來修改。

PS：修改之前要注意備份哦，否則不小心修改出錯了小V可是不負責的喲。