Share page title link smooth Right Shift effect

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Last sent a "share of the site logo luminous effect of the implementation method", do not know how many children's shoes used, do not like I can not, I just share my methods.

Today I want to write is the mouse to move to the title, the title smooth right shift effect, the effect can be seen on my home page.

Do you still think that your page is not lively enough? Pro, then look at the following tutorial toss it up!

The first method uses jquery.

Benefits: Compatible with all browsers, including IE or whatever.

Disadvantage: The code is also very short, no shortcomings.

JQuery (document). Ready (function ($) {

$ ('. Entry-title a '). Hover (function () {

Entry-title A to your title style name, you can apply multiple links, separated by commas

$ (this). Stop (). Animate ({' marginleft ': ' 10px '}, 200);

The smooth effect that the mouse moves to the link, 200 is the millisecond, is the effect time, can change the time that you need

}, function () {

$ (this). Stop (). Animate ({' marginleft ': ' 0px '}, 200);

After the mouse left the link smoothing effect, 200 ditto

});

});

First step to let the theme load jquery library files, now basically no topic is not loaded, so the first step can be omitted.

(Want to know has not loaded this library file of children's shoes, in the Web page to view the source code, search "Jquery.min.js", if there is loading it. )

The second step is to paste this code into the theme of one of the JS file loaded, OK.

The second method uses CSS3.

Advantages: Same effect, no advantage.

Disadvantages: Incompatible IE browser, under IE will move to the right, but there is no smooth effect, because IE does not support CSS3.

First, add the following CSS properties to your title a tag style:

-webkit-transition:margin 0.2s ease-out;

-moz-transition:margin 0.2s ease-out;

-khtml-transition:margin 0.2s ease-out;

and add to this a:hover:

margin-left:10px/* Mobile distance can be adjusted/

According to the above method can see the effect, the two methods are the same effect, but the first method can be compatible with all browsers, so small v wall crack recommended the first method.

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