LOGO发光效果的实现方法
本文最后更新于 4217 天前,其中的信息可能已经有所发展或是发生改变。
这个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:修改之前要注意备份哦. [整理:1udd.com]

文章名称:《LOGO发光效果的实现方法》
文章链接:https://www.1udd.com/6440.html
版权声明:本文采用 License 知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
风险声明:本站资源仅供个人学习交流,请于下载后 24 小时内删除,请勿用于商业用途,否则法律问题自行承担!
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇