intense-images是一款非常實用的超大圖片全屏動態展示js插件。該圖片查看插件可以全屏顯示超大圖片，可以使用鼠標來和圖片進行交互，上下左右移動鼠標會相應的移動圖片，對于超大圖片的展示是非常好的用戶體驗。

使用方法

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

HTML結構

該js插件的HTML結構非常簡單。位移一個強制性的屬性是src或一個data-image屬性。他們都用于指向一個圖片文件。

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

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

初始化插件

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

window.onload = function() {

// 獲取頁面中所有的圖片

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

Intense( element );

}

或者也可以通過CSS名稱來選擇多個圖片。

window.onload = function() {

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

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

Intense( elements );

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。