最新網站資訊

首頁 » WordPress 教學 » 讓WordPress 部落格利用jquery實現圖片顯隱特效

讓WordPress 部落格利用jquery實現圖片顯隱特效


讓WordPress 部落格利用jquery實現圖片顯隱特效,是當滑鼠懸停到圖片上時,圖片變得透明,效果很炫是不是。
如何實現這一特效呢?
當然要用到如日中天、功能強大的jquery,很多WordPress主題中都有加載jquery來實現一些特效,比如滑動選單、圖片幻燈等。
下面就教大家如何把這一特效加入到你的WordPress主題中。
首先需要在header.php中加載jquery,可以使用外鏈也可以內鏈。
外鏈可以利用google為我們提供的JS庫,據說可以提高js加載速度,格式如下:

    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>

內鏈格式為:

    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>

然後再在header.php中加入:

    <script type="text/javascript">
    $(function () {
    $('img').hover(
    function() {$(this).fadeTo("fast", 0.5);},
    function() {$(this).fadeTo("fast", 1);
    });
    });
    </script>

——————————————————————————–
【文章標題】: 讓WordPress 部落格利用jquery實現圖片顯隱特效
【文章作者】: 部落格架站、行銷、賺錢術教學密訓基地
【作者信箱】: ster168ster@gmail.com
【作者首頁】: https://por.tw/blog/
【部落格架站、行銷、賺錢術教學課程】: https://por.tw/blog/E_learning/index.php
【基地主機】: http://goto1688.com/blog/
【版權聲明】: (原創)部落格架站、行銷、賺錢術教學密訓基地,轉載必須保留完整標頭。刪除者依法追究!
——————————————————————————–
儲存後,重整一下頁面看看效果如何。上面的代碼是使頁面中所有的圖片都具有顯隱特效,你也可以在上面的代碼中加入選取器,讓特定Div容器中的圖片具有顯隱特效,修改('img')為例如('.thumbnail img,.entry img')。
上面的特效是滑鼠懸停到圖片上時,圖片變得透明,我目前用的主題採用的就是上面代碼,還有一種是滑鼠懸停到圖片上時,圖片變得清晰,我製作的HotNews pro2.1主題隨機日誌縮略圖採用是這種效果,代碼如下:

    <script type="text/javascript">
    $(function() {
    $('img').animate({"opacity": .5 });

    $('img').hover(function() {
    $(this).stop().animate({ "opacity": 1 });
    }, function() {
    $(this).stop().animate({ "opacity": .5 });
    });
    });
    </script>

代碼修改方法同上,採用哪種圖片顯隱特效就看你喜好了,這一特效支援所有瀏覽器。
——————————————————————————–
你在摸索如何架站部落格?如何展開行銷部落格、甚至賺錢嗎?有【技術顧問服務】可諮詢嗎?
當問題無法解決你要發很多時間處理(或許永遠找出答案)是獨自摸索部落格架站、行銷、賺錢痛苦的開始!
購買【部落格架站、行銷、賺錢術】DVD課程,就可獲得【部落格架站行銷賺錢】技術【顧問諮詢服務】!

發佈留言