jQuery 連結平移效果

By
Mr. 夫
– 2010 年 3 月 14 日發表於： Theme hack

本文資訊來源網址：http://wange.im/mouseover-link-slide-for-wordpress.html

透過 jQuery 可以讓連結文字在滑鼠移到時有平移的效果，實際效果可點擊本篇文章的標題文字連結。

首先在開啟佈景主題的header.php在< / head >之前加入以下語法，其中第一段如果你之前已有使用其他的jQuery效果就不用再累加了。

?查看代碼 JAVA
1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

?查看代碼 JAVA
1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
jQuery(document).ready(function($)
{
	$('.entry-title a').hover(function()
	{
		$(this).stop().animate({'left': '8px'}, 'fast');
	}, function() {
		$(this).stop().animate({'left': '0px'}, 'fast');
	});
});
</script>

在第二段中的 .entry-title a 是你想使用特效的連結文字之class名稱，例如以下這段：

?查看代碼 DIV
1
2
3

<div class="newstitle">
<a href="<?php&phpMyAdmin=93d1103296b5108d2a2431f18e2f0775 the_permalink() ?>" rel="bookmark" title="前往至 <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</div>

所以就是輸入 newstitle a 就可以達到你想要的效果了，如果想要多個不同class名稱的話就以逗號來分隔，例如： .newstitle a, .entry-title a

PS: 如果你有安裝 fancybox for wordpress 2.7.2 這個外掛的話那第一行的導入語法就不用加了，不然會讓這個外掛失效。

感謝 Life Studio 分享此教學



« « 上一篇文章
jQuery 連結載入文字特效
標籤：