• <object id="bumlr"><strong id="bumlr"><noframes id="bumlr">
    1. <track id="bumlr"><ruby id="bumlr"><b id="bumlr"></b></ruby></track>

      <p id="bumlr"><ruby id="bumlr"></ruby></p>
      <track id="bumlr"><strike id="bumlr"><tt id="bumlr"></tt></strike></track>
    2. <acronym id="bumlr"><label id="bumlr"></label></acronym>

    3. 制作網頁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可是不負責的喲。

      訂閱號

      上饒幫

      服務號

      獵人傳媒

      国产美女被遭强高潮视频_97国产精品无码久久_国产精品无码av_五月婷婷色