首页 » 建站技术 » 浏览内容

分享本站LOGO发光效果的实现方法


2013-08-08 21:42:30 1,426 0 发表评论 字体: 作者:C.K.

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

本文来自:http://www.vsay.cn/

先说说这个方法的原理吧。

这个JQ代码会在a标签里动态添加一个span标签,CSS中,a标签的背景设置为默认LOGO,span的的背景设置为有发光效果的LOGO,a和span是在坐标相同的两层位置,也就是说他们的背景是完全重叠的。然后就利用JQ脚本,设置span的透明度初始值为完全透明,当鼠标移上之后,会在设置的时间内慢慢变成不透明,就完成了这个效果。

具体教程在下面:

第一步,首先你必须得有做好的两张LOGO,对吧?类似下图这样。不要跟我说不知道怎么做发光效果,亲,请百度吧,很简单。

20120814225602

第二步,就是修改相应的代码和CSS。

一般大部分主题都是用a标签里面包含img标签来实现LOGO显示的吧。将img标签去掉。小V的代码如下。

<a class="logo-link" href="http://www.vsay.cn" title="V说"  style="text-indent: 0px; "></a>

然后修改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('<span class="hover"></span>').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文件中的样式名称要一致。
    本文只是提供一个方法思路,具体的操作要按你主题的实际代码情况来修改。

    网站统计 Statistics

    • 创建时间: 2005年1月3日 距今5041 天
    • 日志总数: 2461
    • 评论总数: 630
    • 标签总数: 654
    • 链接总数: 273
    • 最后更新: 2018-8-31 17:57:04
    • 您是本站第 14061631 位访客

    广告区 Guǎng Gào