viewer.js实现预览效果
生活随笔
收集整理的這篇文章主要介紹了
viewer.js实现预览效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我是歌謠 放棄很容易 但是堅持一定很酷 微信公眾號關注小歌謠 日常分享前后端知識
前言
最近涉及一個移動端項目
需要把其中的圖片變成可預覽的圖片
聽學弟說 可以利用viewer進行實現
首先
我們需要做的就是先寫一個簡單demo
先實現其中的效果
實現效果
代碼
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="https://unpkg.com/bootstrap@4/dist/css/bootstrap.min.css" crossorigin="anonymous"><link rel="stylesheet" href="./css/viewer.css"> ? </head> <body> <!--./images/thumbnails/tibet-1.jpg--> <div id="galley"><ul id="images1" class="img-list"><li><img src="./images/thumbnails/tibet-1.jpg"/></li><li><img src="./images/thumbnails/tibet-1.jpg"/></li><li><img src="./images/thumbnails/tibet-1.jpg"/></li><li><img src="./images/thumbnails/tibet-1.jpg"/></li></ul><!--二--><!-- <ul id="image2" class="img-list"><li><img src="./images/thumbnails/tibet-1.jpg" data-imgurl="./images/thumbnails/tibet-1.jpg"/></li><li><img src="./images/thumbnails/tibet-1.jpg" data-imgurl="./images/thumbnails/tibet-1.jpg"/></li><li><img src="./images/thumbnails/tibet-1.jpg" data-imgurl="./images/thumbnails/tibet-1.jpg"/></li><li><img src="./images/thumbnails/tibet-1.jpg" data-imgurl="./images/thumbnails/tibet-1.jpg"/></li></ul>--> ? </div> </body> </html> <script src="https://unpkg.com/jquery@3/dist/jquery.slim.min.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap@4/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <script src="./js/viewer.js"></script> <script>window.onload = function(){var viewer = new Viewer(document.getElementById('galley'), {});//var viewer = new Viewer(document.getElementById('image2'), {url: 'data-imgurl'});} </script> ? ?步驟
看一下效果預覽
點擊的時候就可以進行一個效果的預覽操作了
同樣 三步走
第一步引入
第二步注意結構
第三步效果演示
</div><div class="col-lg-12"><div id="allmap"> ?<img src="images/867.png" data-imgurl="images/867.png" alt="" style="width: 100%"></div></div></div> </div> ? ? <!--公共尾部--> <div class="footer"></div> ? </body> <script src="js/main.js"></script> <script src="js/aos.js"></script> <script src="js/viewer.js"></script> ? <script>window.onload = function(){var viewer = new Viewer(document.getElementById('allmap'), {});//var viewer = new Viewer(document.getElementById('image2'), {url: 'data-imgurl'});}//DOM加載完成之后執行函數
我是歌謠 放棄很容易 但是堅持一定很酷
總結
以上是生活随笔為你收集整理的viewer.js实现预览效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 普林斯顿微积分读本第一章--函数、反函数
- 下一篇： 少年，看你异于常人，有空花2小时来参加有