做网站的内容样本,公众号里原文单发到dede网站上,桂林生活网站,推广普通话宣传周活动方案我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注小歌谣 日常分享前后端知识 前言
最近涉及一个移动端项目
需要把其中的图片变成可预览的图片
听学弟说 可以利用viewer进行实现
首先
我们需要做的就是先写一个简单demo
先实现其中的效果
实现效果 代码
!doct… 我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注小歌谣 日常分享前后端知识 前言
最近涉及一个移动端项目
需要把其中的图片变成可预览的图片
听学弟说 可以利用viewer进行实现
首先
我们需要做的就是先写一个简单demo
先实现其中的效果
实现效果 代码
!doctype html
html langen
headmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefhttps://unpkg.com/bootstrap4/dist/css/bootstrap.min.css crossoriginanonymouslink relstylesheet href./css/viewer.css
/head
body
!--./images/thumbnails/tibet-1.jpg--
div idgalleyul idimages1 classimg-listliimg src./images/thumbnails/tibet-1.jpg//liliimg src./images/thumbnails/tibet-1.jpg//liliimg src./images/thumbnails/tibet-1.jpg//liliimg src./images/thumbnails/tibet-1.jpg//li/ul!--二--!-- ul idimage2 classimg-listliimg src./images/thumbnails/tibet-1.jpg data-imgurl./images/thumbnails/tibet-1.jpg//liliimg src./images/thumbnails/tibet-1.jpg data-imgurl./images/thumbnails/tibet-1.jpg//liliimg src./images/thumbnails/tibet-1.jpg data-imgurl./images/thumbnails/tibet-1.jpg//liliimg src./images/thumbnails/tibet-1.jpg data-imgurl./images/thumbnails/tibet-1.jpg//li/ul--
/div
/body
/html
script srchttps://unpkg.com/jquery3/dist/jquery.slim.min.js crossoriginanonymous/script
script srchttps://unpkg.com/bootstrap4/dist/js/bootstrap.bundle.min.js crossoriginanonymous/script
script src./js/viewer.js/script
scriptwindow.onload function(){var viewer new Viewer(document.getElementById(galley), {});//var viewer new Viewer(document.getElementById(image2), {url: data-imgurl});}
/script
步骤
看一下效果预览
点击的时候就可以进行一个效果的预览操作了
同样 三步走
第一步引入
第二步注意结构
第三步效果演示 /divdiv classcol-lg-12div idallmap
img srcimages/867.png data-imgurlimages/867.png alt stylewidth: 100%/div/div/div
/div
!--公共尾部--
div classfooter/div
/body
script srcjs/main.js/script
script srcjs/aos.js/script
script srcjs/viewer.js/script
scriptwindow.onload function(){var viewer new Viewer(document.getElementById(allmap), {});//var viewer new Viewer(document.getElementById(image2), {url: data-imgurl});}//DOM加载完成之后执行函数我是歌谣 放弃很容易 但是坚持一定很酷
