[zz]wordpress自定义链接添加平滑移动效果

/ 0评 / 1

今天在别人博客看到一个效果,估计大家也不陌生,就是当鼠标放到文章标题上的时候,标题会右移,看着效果还不错,于是乎,我就右击,查看源码,捣鼓一番之后,就借鉴过来了,在此分享给大家啊,别说我盗版,你也可以的……

其实这个效果只要一段jQuery代码就可以,添加如下代码到主题文件head.php

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>
<script type="text/javascript">
jQuery(document).ready(function($){       
$('.excerpt h2 a').hover(function() {    
//.excerpt h2 a 改成你标题的样式名称,可以应用多个链接,用逗号隔开      
$(this).stop().animate({'marginLeft': '10px'}, 200);      
//鼠标移动到链接上的平滑效果,200是毫秒,就是效果时间,可以改成你需要的时间      
}, function() {       
$(this).stop().animate({'marginLeft': '0px'}, 200);      
//鼠标离开链接后的平滑效果,200同上      
});       
});
</script>

由于现在主题基本都记在了jquery.min.js文件,故第一行可以去掉的,如果你感觉head.php总添加这些东西感觉很乱,你也可以新建一个js文件,把上述代码(去掉script标签)复制进去,然后在head.php里加载下也可以,我现在用的就是这样的。

这段代码的解析其实上面也有了,主要和大家说下其中一段

$('.excerpt h2 a').hover(function() {    
//.excerpt h2 a 改成你标题的样式名称,可以应用多个链接,用逗号隔开

这个地方是灵活多变的,看我添加的是excerpt h2 a,这个是D7主题的标题样式名称,你需要根据自己的主题而修改,根据上面提示还可以添加其他部分,比如D7主题我添加了侧栏评论右移,侧栏最新文章右移,代码如下

$('.widget_d_comment li,.widget_recent_entries li,.excerpt h2 a').hover(function() {

其中 li 是一行行的,如果不加 li ,整个评论或者最新文章都会移动,具体还要根据自己主题所定,如果大家继续深究的话,可以稍微该下上面代码,也可以实现向左,向上,向下移动都可以,自己折腾吧,有提示大家应该都可以看懂了。

忘记说了,网上看资料的时候,好像有款插件,叫wp-linkmove,说是可以实现这个功能,没有实验过,知道的朋友也可以说下哦。

发表评论

邮箱地址不会被公开。 必填项已用*标注