腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

純JS開發(fā)移動端響應(yīng)式圖片展示插件baguetteBox.js的代碼

baguetteBox.js響應(yīng)式圖片展示插件

投訴報錯

腳本大?。?span>295MB
腳本語言：簡體中文
腳本類型：國產(chǎn)軟件
腳本授權(quán)：免費軟件
腳本類別：ajax/javascript
應(yīng)用平臺：javascript
更新時間：2020-06-28
網(wǎng)友評分：

360通過騰訊通過金山通過

295MB

詳情介紹

今天給大家分享純JS開發(fā)移動端響應(yīng)式圖片展示插件baguetteBox.js的代碼，大家都知道baguetteBox.js是一款支持移動設(shè)備的響應(yīng)式lightbox插件。baguetteBox.js用純javascript編寫，支持響應(yīng)式圖片和CSS3動畫過渡效果，支持移動手機，壓縮后的版本僅2.7K。

使用方法

在頁面中引入baguetteBox.js和baguetteBox.css文件。

<link rel="stylesheet" href="path/to/baguetteBox.css">
<script src="path/to/baguetteBox.js"></script>

HTML結(jié)構(gòu)

baguetteBox.js lightbox圖片畫廊的基本HTML結(jié)構(gòu)如下：

<div class="gallery"> 
    <a href="img/2-1.jpg" data-caption="Image caption"> 
        <img src="img/thumbs/2-1.jpg" alt="First image"> 
    </a> 
    <a href="img/2-2.jpg"> 
        <img src="img/thumbs/2-2.jpg" alt="Second image"> 
    </a> 
    ...
</div>

如果要使用圖片標(biāo)題，可以在a標(biāo)簽上添加title或data-caption屬性。

方法API

baguetteBox.js插件有4個可用的方法：
run：初始化baguetteBox.js插件。
showNext：切換到下一張圖片。
showPrevious：切換到前一張圖片。
destroy：銷毀插件和綁定的事件。

響應(yīng)式圖片

要使用響應(yīng)式圖片特性，只需要在a標(biāo)簽上設(shè)置data-at-{width}屬性。其中{width}指的是最大屏幕寬度。例如：

<a href="img/2-1.jpg"  
data-at-450="img/thumbs/2-1.jpg"  
data-at-800="img/small/2-1.jpg"  
data-at-1366="img/medium/2-1.jpg"  
data-at-1920="img/big/2-1.jpg">    
    <img src="img/thumbs/2-1.jpg">
</a>

如果你的屏幕分辨率是1366x768，那么baguetteBox.js插件就會選擇"img/medium/2-1.jpg"這張圖片來顯示。二如果屏幕分辨率是1440x900，插件會選擇"img/big/2-1.jpg"這張圖片。href屬性中指定的圖片是為了兼容舊的瀏覽器二設(shè)置的一張通用圖片。

baguetteBox.js 響應(yīng)式圖片展示插件

下載地址

下載錯誤？【投訴報錯】