开始

  • 前几天接到一个小的支持，要做一个有图像预览和操作功能的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. mysql使用truncate截断带有外键的表时报错--解决方案

    报错内容如:1701 - Cannot truncate a table referenced in a foreign key constraint 一.为什么要使用truncate 使用trunc ...

  2. JS 回车提交，兼容IE、火狐、Opera、Chrome、Safari……

    1.JavaScript 方法: <script>      document.onkeydown=function(event){          e = event ? event  ...

  3. gocheck框架

    1.  引用包 :  gocheck "gopkg.in/check.v1" 2. 自动化测试入口   :Test_run(t *testing.T) 3. 将自定义的测试用例集, ...

  4. 第 20 课 go如何实现继承的 && 给引用模块起别名

    golang语言中没有继承,但是可以依靠组合来模拟继承和多态. package controllers import ( "encoding/json" md "gowe ...

  5. vue报错：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    在.vue文件中引入了 element-ui 的 table 和 pagination 组件后,报错:Component template should contain exactly one roo ...

  6. input标签自动填充问题

    <input type='text' placeholder='手机号' /> <input type='text' placeholder='地址' /> <input ...

  7. php open_basedir的使用与性能分析

    php open_basedir的使用与性能分析 使用方法 <pre>/*限制打开的目录*/ini_set('open_basedir', __DIR__.'/');</pre> ...

  8. php开启多线程下载

    php开启多线程下载 <pre><?php/** * 多进程批量下载文件(使用php curl_multi_exec实现) * Date: 2017-07-16 * Author: ...

  9. python __name__ == ‘__main__’详细解释（27）

    学习过C语言或者Java语言的盆友应该都知道程序运行必然有主程序入口main函数,而python却不同,即便没有主程序入口,程序一样可以自上而下对代码块依次运行,然后python不少开源项目或者模块中 ...

  10. 阿里云RocketMQ的消费者简单实现

    业务场景之类的请看另一篇生产者的实现: package com.ttt.eee; import com.aliyun.openservices.ons.api.Action; import com.a ...