intense-images是一款非常實(shí)用的超大圖片全屏動(dòng)態(tài)展示js插件。該圖片查看插件可以全屏顯示超大圖片，可以使用鼠標(biāo)來(lái)和圖片進(jìn)行交互，上下左右移動(dòng)鼠標(biāo)會(huì)相應(yīng)的移動(dòng)圖片，對(duì)于超大圖片的展示是非常好的用戶體驗(yàn)。

使用方法

該超大圖片展示插件沒有任何外部依賴，使用時(shí)僅需引入intense.js文件即可。

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

該js插件的HTML結(jié)構(gòu)非常簡(jiǎn)單。位移一個(gè)強(qiáng)制性的屬性是src或一個(gè)data-image屬性。他們都用于指向一個(gè)圖片文件。

你也可以傳入圖片的標(biāo)題和描述文本，它們會(huì)被顯示在屏幕的左下角位置。圖片標(biāo)題使用data-title屬性，圖片描述使用data-caption屬性。

data-caption="圖片描述信息"/>

初始化插件

你可以使用document.querySelector()方法來(lái)獲取你要全屏顯示的圖片，然后將它作為參數(shù)傳入到Intense()方法中。

window.onload = function() {

// 獲取頁(yè)面中所有的圖片

var element = document.querySelector( 'img' );

Intense( element );

}

或者也可以通過(guò)CSS名稱來(lái)選擇多個(gè)圖片。

window.onload = function() {

// 選擇所有class名稱為intense的圖片

var elements = document.querySelectorAll( '.intense' );

Intense( elements );

}

總結(jié)

以上是生活随笔為你收集整理的js大屏导出图片_超大图片全屏动态展示js插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。