• <bdo id="k62mm"></bdo>
  • <table id="k62mm"></table>

    制作網頁LOGO發光效果教程

    網頁設計 / 2012-08-23 16:52:00

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

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

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

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

    具體教程在下面:

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

    默認LOGO和發光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可是不負責的喲。

    訂閱號

    上饒幫

    服務號

    獵人傳媒

    俄罗斯∧片,2012国语免费完整播放,好湿好紧好浪好大好爽gif
  • <bdo id="k62mm"></bdo>
  • <table id="k62mm"></table>