viewer.js實現(xiàn)圖片預(yù)覽功能
更新時間：2020年06月24日 17:32:44 作者：Jeslie-He
這篇文章主要為大家詳細介紹了viewer.js實現(xiàn)圖片預(yù)覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
viewer.js是實現(xiàn)圖片預(yù)覽的插件庫，要在項目中使用它里面的功能，首先要引入兩個文件：
1、css文件:viewer.css
2、js文件:viewer.js
可以在這里下載
下載后，在html中引入
<link rel="stylesheet" type="text/css" href="./viewer.css" /> <script src="./viewer.js" type="text/javascript" charset="utf-8"></script>
頁面布局
html部分
<div id="imgBox"> <div id="imgBoxItem" class="imglist1"> <img src="image/img-1.jpg" data-imgurl="image/img-1.jpg"> </div> <div id="imgBoxItem" class="imglist2"> <img src="image/img-2.jpg" data-imgurl="image/img-2.jpg"> </div> <div id="imgBoxItem" class="imglist3"> <img src="image/img-3.jpg" data-imgurl="image/img-3.jpg"> </div> <div id="imgBoxItem" class="imglist4"> <img src="image/img-4.jpg" data-imgurl="image/img-4.jpg"> </div> </div>
CSS部分:
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #f5f5f5;
font-family: 'PingFang SC Regular', 'PingFang SC';
width: 100%;
min-width: 320px;
max-width: 480px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-shadow: none;
position: absolute;
box-sizing: content-box;
word-break: break-all;
}
#imgBox {
width: 92%;
margin: 0 auto;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
}
#imgBoxItem {
width: 48%;
margin-left: 1%;
margin-right: 1%;
margin-top: 1%;
height: 100px;
}
#imgBoxItem img {
width: 100%;
height: 100%;
}
JS部分:
<script type="text/javascript">
window.onload = function() {
var viewer = new Viewer(document.getElementById('imgBox'), {
url: 'data-imgurl'
});
}
</script>
效果:
預(yù)覽前:
點擊圖片預(yù)覽:
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在開發(fā)中需要定義一個對象的類型,此類型必須包含某n個字段中的其中一種,這篇文章主要給大家介紹了關(guān)于TypeScript開發(fā)小狀況記錄之選且只選一個的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了前端程序員必須知道的高性能Javascript知識，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了微信小程序按鈕點擊動畫效果的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
測試代碼真方便...2006-07-07
這篇文章主要為大家介紹了postMessage及webSocket跨域方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
JavaScript的ES5實現(xiàn)繼承的4種常用方法小結(jié)
繼承是面向?qū)ο筌浖夹g(shù)當(dāng)中的一個概念,這篇文章主要為大家詳細介紹了JavaScript ES5實現(xiàn)繼承的4種常用方法,感興趣的小伙伴可以了解一下2024-03-03
這篇文章主要介紹了js比較日期大小的方法,涉及javascript日期的轉(zhuǎn)化、匹配、比較等常用操作技巧,需要的朋友可以參考下2015-05-05
下面小編就為大家?guī)硪黄猨s計算時間差代碼【包括計算，天，時，分，秒】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-04
這篇文章主要介紹了JavaScript定義變量和變量優(yōu)先級的問題探討,變量的定義還有這么講究嗎,不錯,看完本文相信你會有一定的收獲,需要的朋友可以參考下2014-10-10
這篇文章主要給大家介紹了關(guān)于JavaScript如何正確的寫代碼注釋的相關(guān)資料,注釋的作用是提高代碼的可讀性,幫助自己和別人閱讀和理解你所編寫的JavaScript代碼,注釋的內(nèi)容不會在網(wǎng)頁中顯示,需要的朋友可以參考下2023-10-10