WordPress | 链接平移特效代码

把你的鼠标放到文章标题上,是不是标题移动了!对这就是拉风的JQuery特效
只需几步即可实现:

1.载入 JQuery 库:(一般的主题都已经加载过jQuery库)如果没加载,那就自己加载下吧

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
将上面的代码加入到在header.php的head标签中加载jQuery库(当然你也可以将jquery.min.js下载下来,放到你的server上 )
:你相信你的主机可以跟Google比的话!

2.保存让链接动起来的JS代码:

将如下代码保存起来,如name.js

jQuery(document).ready(function($){
$(‘.post h2 a’).hover(function() {
$(this).stop().animate({‘left’: ‘5px’}, ‘fast’);
}, function() {
$(this).stop().animate({‘left’: ‘0px’}, ‘fast’);
});
});

其中“.post h2 a”是控制哪部分移动的,你可以参照你自己的css文件修改。如需多个注意在添加多个,则要在添加其他部分之间增加“, ”如:“.linkpage ul, .post h2 a”

3.在header.php中添加JS引用代码:

在head标签中添加

<script type="text/javascript" src="http://domainname/name.js"></script>

其中domainname是你的域名,如我的域名是http://www.kinggoo.com
name.js是你刚刚保存的让链接动起来的JS代码文件

4.接下来是修改CSS

在style.css中添加

/*  链接平移特效代码 */
.post h2 a {position:relative;}

5.把修改好的文件都传上去

logo

PS

我自己在本地实验的时候,效果全都能达到,但放到空间里就不行了。这把我郁闷的,想了好久也找了好久问题出在哪。还好功夫不负有心人啊,在我坚持不懈的努力下终于把问题找到了,原来问题出在header.php里面,如图:本地图image

空间图image

细心点的人都会看出来吧,对就是<?php if ( is_singular() ){ ?>搞的鬼!其实就是位置放错了,将添加的js放到<?php if ( is_singular() ){ ?>上面就哦K了,如图:image

 

OK,END 

本文参考壹品集

- THE END -
版权声明:
转载原创文章请注明,文章出处://kinggoo.com
原文地址:https://kinggoo.com/xtyy-wp-linkmovecode.htm
发表评论?

0 条评论。

发表评论


此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据