开始

  • 前几天接到一个小的支持，要做一个有图像预览和操作功能的demo，并且给出了参照的模板。刚开始简单的看了一下给的模板，一个是boxImg.js，另一个是Viewer.js。

问题

  • 其实图片预览的插件有很多，但大多都是点击之后弹出一个模态层显示图片，而本次要求是直接在页面上显示，直接显示在一个div里。刚开始用boxImg做了一版，使用了iframe，直接放到页面当一个div用，效果是挺好，但是副作用感觉也挺大的，而且这个效果比较丑，因为不是我这边使用，是另一个部门的用的，然后就把这一版给pass了。

  • boxImg.js的效果图

  • 做这个东西最大的问题就是不能以模态框的形式显示，后来看了另一个Viewer.js，感觉功能比较强大，也很好看，最重要的是它有一个inline模式，可以局部模态框，最后选中用它来做。

修改

  1. 主要是对实例代码的custom-toolbar.html进行了修改，根据api改为了inline mode，去除了模态框灰色背景，去除了右上角按钮。
  2. 隐藏了背景图片，并且通过定位让底部的工具栏变成了竖的，我觉得横的挺好看的，但需求让改成竖的。
  3. 对于一些样式的修改，主要通过css样式的覆盖，而不是直接改动源码，这样方便以后的开发加工。

效果

  • 普通版

  • 工具栏竖版

相关代码参考我的github：黄焖鸡米饭

Viewer.js的inline模式的更多相关文章

  1. 一款实用的viewer.js 图片相册

    Viewer.js 是一款强大的图片相册插件,像SNS交友网站一般都会用到点击缩略图,弹出层大图片,而且弹出层有多个控制按钮,比如放大缩小.旋转.撤回等,底部有缩略图列表可切换. 支持移动设备触摸事件 ...

  2. Viewer.js 是一款强大的 jQuery 图像浏览插件。

    https://blog.csdn.net/qq_29132907/article/details/80136023 一.效果图  二.代码<!DOCTYPE html><html ...

  3. Viewer.js 图片预览插件使用

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片 ...

  4. 强大的jQuery图片查看器插件Viewer.js

    简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 ...

  5. Viewer.js – 强大的JS/jQuery图片查看器

    简介 Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Viewer.js 有以下特点: ...

  6. viewer.js图片查看器插件（可缩放/旋转/切换）

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. viewer.js的简单练习

    html <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8& ...

  8. 图片查看器——viewer.js

    使用简介 https://github.com/FNNDSC/viewerjs(需要点击遮罩层关闭弹框的复制下面内容) https://www.jianshu.com/p/d98db3815823 v ...

  9. Js 职责链模式 简单理解

    js 职责链模式 的简单理解.大叔的代码太高深了,不好理解. function Handler(s) { this.successor = s || null; this.handle = funct ...

随机推荐

  1. springboot配置虚拟路径访问用户上传的附件及图片资源

    在springmvc项目中,我们通常把图片及附件存放到WEB-INF/upload类似的路径. springboot项目是通过jar包方式运行的. 笔者曾尝试以下代码,把图片转成base64格式的图片 ...

  2. 下载Hadoop环境的虚拟机文件

    使用的是hortonworks的hadoop环境, 下载地址:https://hortonworks.com/downloads/#

  3. 【Leetcode_easy】686. Repeated String Match

    problem 686. Repeated String Match solution1: 使用string类的find函数: class Solution { public: int repeate ...

  4. 图像Resize中0.5像素中心对齐的问题

    目录 0.5像素对齐的问题 0.5像素对齐的问题 1. 问题提出 在进行图像缩放时,偶尔会看到一些比较奇怪的代码,其中有一个就是0.5像素中心对齐的问题,例如在OpenCV线性插值的代码中有类似如下操 ...

  5. 理解KNN算法中的k值-knn算法中的k到底指的是什么 ？

    2019-11-09 20:11:26为方便自己收藏学习,转载博文from:https://blog.csdn.net/llhwx/article/details/102652798 knn算法是指对 ...

  6. (JavaScript) 百度地图与腾讯地图坐标转换

    /** * 坐标转换,百度地图坐标转换成腾讯地图坐标 * lng 腾讯经度(pointy) * lat 腾讯纬度(pointx) * 经度>纬度 */ function bMapToQQMap( ...

  7. [转帖]Linux修改时区的正确方法

    Linux修改时区的正确方法 /etc/localtime 以及timedatectl 两种方式修改时区. CentOS和Ubuntu的时区文件是/etc/localtime,但是在CentOS7以后 ...

  8. [转帖]持久化journalctl日志清空命令查看配置参数详解

    持久化journalctl日志清空命令查看配置参数详解 最近 linux上面部署服务 习惯使用systemd 进行处理 这样最大的好处能够 使用journalctl 进行查看日志信息. 今天清理了下 ...

  9. Scratch：海龟绘图（九）

    在本课的前导部分,我们说到怎么做才能成为一个负责任的“程序猿”.我认为,负责任的程序员决不会草率的处理任何“函数接口”. 比如这个“画圆”函数,程序员就会认真推敲“哪些参数是必要的.哪些参数又是多余的 ...

  10. C# DataTable和List转换操作类

    using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.R ...