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

快捷導(dǎo)航

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

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

投訴報(bào)錯(cuò)

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

360通過騰訊通過金山通過

295MB

詳情介紹

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

使用方法

在頁(yè)面中引入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個(gè)可用的方法：
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插件就會(huì)選擇"img/medium/2-1.jpg"這張圖片來(lái)顯示。二如果屏幕分辨率是1440x900，插件會(huì)選擇"img/big/2-1.jpg"這張圖片。href屬性中指定的圖片是為了兼容舊的瀏覽器二設(shè)置的一張通用圖片。

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

下載地址

下載錯(cuò)誤？【投訴報(bào)錯(cuò)】