動態背景圖片插件jquery-backstretch

jquery-backstretch是一款簡單的jQuery插件，可以用來設置動態的背景圖片，以下是官方網站的介紹。

A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element.

可以直接在頁面中引入該插件的cdn來調用函數，也可以直接下載下來使用，這是官方地址。

jquery-backstretch的使用方法

引入該插件的cdn

打開themes\next\layout\_custom\custom-foot.swig

{#
Custom foot in body, Can add script here.
#}
<!-- 圖片輪播js文件cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

<!-- 自定義的js文件 -->
<script type="text/javascript" src="/js/src/custom.js"></script>
 

需要註意的是，我們要引入的插件cdn，都需要在自定義的js文件custom.js之前引入才行！否則，插件會在訪問頁面時無法生效，可以在瀏覽器的控制臺看到報錯。

調用backstretch函數

在themes\next\source\js\src\custom.js中添加如下代碼：

/* 輪播背景圖片 */
$(function () {
    $.backstretch([  
          "/images/background/saber1.jpg",
          "/images/background/saber2.jpg",
          "/images/background/bg1.jpg"
    ], { duration: 60000, fade: 1500 });  
});
 

這裏可以隨意添加你想要輪播的圖片，但要確保圖片路徑是正確的，比如我的背景圖片就存放在站點根目錄下的images/background/目錄下。

然後duration指的是輪換圖片的時間，單位是毫秒，也就是說這裏的代碼表示一分鐘就輪換到下一張圖片；

fade指的是輪換圖片時會有個漸進漸出的動作，而這個過程需要花費的時間單位也是毫秒，如果不加上這個參數，就表示離開輪換成下一張圖片。

註意這裏的$.backstretch指的是對整個頁面設置背景圖片，我們也可以專門給某個元素設置背景圖片，如下：

$(function () {
    $(".saber1").backstretch(["/images/background/saber1.jpg"]);  
    $(".saber2").backstretch(["/images/background/saber2.jpg"]);  
});

如果只有一張圖片，就沒必要設置duration和fade參數了。

為背景圖片設置樣式

雖然我們設置好了背景圖片，但如果頁面的許多元素是不透明的，背景圖片可能並不能很好地被看見，所以我們可以對背景圖片和其他的頁面元素進行設置樣式。

首先為背景圖片設置透明度，因為有的圖片顏色比較深厚，而頁面多為白色，然後造成喧賓奪主的感覺。

file:themes\next\source\css\_custom\custom.styl

/* 背景圖片透明度 */
.backstretch {
    opacity: .75;
}

接下來設置頁面元素透明度，需要註意的是，如果我們在主題配置文件中啟用了搜索功能，那麽就不能簡單粗暴地直接將整個頁面都設置透明度，這會導致搜索框失效，無法正常使用。原因是因為搜索框是通過jQuery臨時添加的，如果整個頁面都設置了透明度，會導致搜索框的z-index失效而無法觸發點擊事件。

我在折騰了一段時間後，終於想到了個取巧的方法，那就是將搜索框的父元素設置為白色透明的，而其他頁面元素則直接設置透明度，如下：

file:themes\next\source\css\_custom\custom.styl

/* 頁面透明度 */
.content-wrap, .sidebar {
    opacity: .9 !important;
}
.header-inner {
    background: rgba(255, 255, 255, 0.9) !important;
}

Hexo瞎折騰系列(2) - 添加背景圖片輪播