制作網(wǎng)頁LOGO發(fā)光效果教程

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

于是想到了能不能用JQ來實(shí)現(xiàn)，當(dāng)然，實(shí)驗(yàn)結(jié)果就是現(xiàn)在的樣式啦，還是很滿意的。

先說說這個(gè)方法的原理吧。

這個(gè)JQ代碼會(huì)在a標(biāo)簽里動(dòng)態(tài)添加一個(gè)span標(biāo)簽，CSS中，a標(biāo)簽的背景設(shè)置為默認(rèn)LOGO，span的的背景設(shè)置為有發(fā)光效果的LOGO，a和span是在坐標(biāo)相同的兩層位置，也就是說他們的背景是完全重疊的。然后就利用JQ腳本，設(shè)置span的透明度初始值為完全透明，當(dāng)鼠標(biāo)移上之后，會(huì)在設(shè)置的時(shí)間內(nèi)慢慢變成不透明，就完成了這個(gè)效果。

具體教程在下面：

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

默認(rèn)LOGO和發(fā)光LOGO

第二步，就是修改相應(yīng)的代碼和CSS。

一般大部分主題都是用a標(biāo)簽里面包含img標(biāo)簽來實(shí)現(xiàn)LOGO顯示的吧。將img標(biāo)簽去掉。代碼如下。

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

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

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

基本上每個(gè)主題都會(huì)加載一些JS的，隨便找個(gè)每個(gè)頁面都會(huì)用的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要換成你自己設(shè)置的a標(biāo)簽的class名稱。

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

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

PS：修改之前要注意備份哦，否則不小心修改出錯(cuò)了小V可是不負(fù)責(zé)的喲。