How to make a webpage LOGO

Mr. V is a tough guy. Since I changed my wordpress topic, I always wanted to change my location to what I wanted.

The LOGO of the topic was originally just a static image with no dynamic effect, and it seems too low-end, haha. So Mr. V thought about modifying the LOGO. Could he add some dynamic Styles? The original modification method was to change the background of tag a to the original LOGO, and then add a: hover style, replace the background with a shiny LOGO image. Although this method can realize light-emitting changes, the change process is too stiff. This is not what small V wants.

So I thought about whether JQ can be used for implementation. Of course, the experiment results are the current style, and Mr. V is quite satisfied.

Let's talk about the principle of this method first.

This JQ code dynamically adds a span tag to tag a. in CSS, the background of tag a is set to the default LOGO, and the background of span is set to a luminous LOGO, a and span are two layers of coordinates, that is, their backgrounds overlap completely. Then, the JQ script is used to set the span's initial transparency value to completely transparent. After the mouse is moved up, the span will gradually become opaque within the set time, and this effect will be completed.

The specific tutorial is as follows:

First, you must have two well-prepared logos, right? This is similar. Don't tell me how to make the light-emitting effect. Baidu is easy.

　　

 

Default LOGO and luminous LOGO

Step 2: Modify the corresponding code and CSS.

Generally, most themes use the img label in the label to display the LOGO. Remove the img tag. The Code of small V is as follows.

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

Then modify the CSS style, as shown in the following example.

. Logo-link {display: block; width: pixel PX; height: pixel PX; background: url (default LOGO address );}

. Logo-link span. hover {display: block; width: pixel PX; height: pixel PX; background: url (luminous LOGO address );}

Step 3: Modify the JS file and add the JQ code.

Basically, some JS files are loaded for each topic. You can find a JS file that will be used for every page and open it to add the following code:

JQuery (document). ready (function (){

Jquery('.logo-link,'cmd.wrapinner(''cmd.css ('textindent ', '0'). each (function (){

Jquery('span.hover'0000.css ('opacity ', 0). hover (function (){

JQuery (this). stop (). fadeto( 600, 1 );

}, Function (){

JQuery (this). stop (). fadeto( 600, 0 );

});

});

});

Note: In jQuery ('. logo-link,'), replace. logo-link with the class Name of the tag you set yourself.

OK, the method is roughly like this. Note that the style names in the CSS file and JS file must be consistent.

This article only provides a method of thought. The specific operations should be modified according to the actual code of your topic.

PS: Pay attention to the backup before modification. Otherwise, you will not be responsible for the failure of the Minor V modification.

Link: http://www.vsay.cn/share-this-station-title-link-moves-smoothly-to-the-right-effect.html