前端学习案例-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加载完成之后执行函数


相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
5天前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
|
3月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
70 0
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
62 4
|
2月前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
61 4
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
331 1
|
2月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
76 1
|
2月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
79 1
|
2月前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
55 1