WordPress 主題製作學習筆記：幫你的主題加上 jQuery 特效「圖片顯隱+平滑滾動」功能

記得我們在上一篇主題製作學習筆記裡面曾經加載了 jQuery 主程式嗎？不要浪費，我們還可以加上其它 jQuery 特效來美化你的主題。

本格的常客們應該都有發現，本格自從啟用目前主題之後，首頁以及所有文章頁的圖片都有顯隱特效，也就是圖片有一層白霧、但滑鼠移到圖片就能看清楚的特效，這樣的特效是採用了 jQuery。現在我們就來將這個特效加進主題裏吧！

必須說明的是，這兩種 jQuery 特效代碼，我都是由對岸博客網友萬戈那裡學習得來的，在此要先跟萬戈說句：謝謝！

jQuery圖片顯隱特效

首先請你將以下代碼複製之後另存為 img-hook.js 的檔案：（存在主題資料夾裏的 js 資料夾）

jQuery(document).ready(function($) {
    $('.alignleft img,.entry img').animate({"opacity": .5 });

    $('.alignleft img,.entry img').hover(function() {
    $(this).stop().animate({ "opacity": 1 });
    }, function() {
    $(this).stop().animate({ "opacity": .5 });
    });
    });

jQuery(document).ready(function($) {

$('.alignleft img,.entry img').animate({"opacity": .5 });

$('.alignleft img,.entry img').hover(function() {

$(this).stop().animate({ "opacity": 1 });

}, function() {

$(this).stop().animate({ "opacity": .5 });

});

然後請你打開主題的 footer.php 檔案，在：

<?php wp_footer(); ?>

1	<?php wp_footer(); ?>

之前加入以下代碼調用這個特效：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/img-hook.js"></script><!-- jQuery圖片顯隱特效 -->

1	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/img-hook.js"></script><!-- jQuery圖片顯隱特效 -->

如此即大功告成。

jQuery平滑滾動

好，緊接著，再跟大家分享平滑滾動的 jQuery 特效。本格常客應該都知道在這裡看文章時，你可以按下標題下方的向下箭頭圖片去看該文章的所有留言；在留言評論處，也可以按下「發表評論」直接跳到書寫框去留言；而本格每一個頁面的頁尾右下角也都有一個向上箭頭的圖片供你點擊，點擊之後就會回到頁首處。而這樣的移動，都有平滑特效產生，這種效果就是運用了 jQuery 的平滑滾動特效。

現在就請大家把以下的 jQuery 特效代碼複製，直接貼在主題的頁尾檔案（footer.php）裏

<script type="text/javascript">
$(document).ready(function() {
    $('a[href*=#]').click(function() {
        if (location.pathname.replace(/^\https://, '') == this.pathname.replace(/^\https://, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({
                    scrollTop: targetOffset
                },
                1000);
                return false;
            }
        }
    });
});
</script><!-- jQuery 平滑滾動 -->

$(document).ready(function() {

$('a[href*=#]').click(function() {

if (location.pathname.replace(/^\https://, '') == this.pathname.replace(/^\https://, '') && location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({

scrollTop: targetOffset

1000);

return false;

}

});

</script>

大家可以發現，在代碼第三行的地方，使用了

$('a[href*=#]').click(function()

1	$('a[href*=#]').click(function()

這樣的代碼函數，這代表你要為你的平滑滾動加上 # 開頭的 a link 屬性，譬如我的向上箭頭圖片，代表我要點擊該圖片就能回到頁首處，那麼代碼要怎麼添加呢？以下是我的返回頁首的代碼，你記得把屬性換成適合你使用的主題。

<div id="top">
	<a href="#header" title="返回頁首"><img src="<?php bloginfo('template_url'); ?>/images/top.png" alt="返回頁首" /></a>
</div>

<a href="#header" title="返回頁首"><img src="<?php bloginfo('template_url'); ?>/images/top.png" alt="返回頁首" /></a>

</div>

大家可以看到我的 a link 屬性使用的是 #header，這代表點擊向上圖片，就能回到頁首的地方。至於其他的平滑滾動連結，大家可以此類推，自己試驗看看囉

代碼來源：
jQuery圖片顯隱特效
jQuery平滑滾動

文ｂｙ覺非／WordPress 主題製作學習筆記．之七

　飛翔於文字國裏的蝴蝶，我是愛寫文的女子，不要看我的人，請你看看我的文，那裡面全是我的心．和我想對你說的話……

　StartOver．回。到。原。點 https://carrielis.com

Page

jQuery圖片顯隱特效

jQuery平滑滾動

4 Comments

Submit a Comment 取消回覆

關於我 About Me

主機推薦

最新文章

隨選文章