npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

zx-image-view

v1.5.0

Published

Image view plugin

Downloads

71

Readme

image-view

图片预览插件,支持图片切换、旋转、缩放、移动...

浏览器支持:IE10+, (IE9不支持旋转功能)

默认键盘操作

方向键:左leftright前后图片切换,上updown顺时针逆时针旋转

滚动鼠标:缩放

注:支持自定义按键配置,详见参数说明。

使用 use

npm

npm install zx-image-view --save-dev
# 或
npm i zx-image-view -D

ES6+

import { ZxImageView } from 'zx-image-view'

浏览器Brower

<div id="imgList">
  <img data-index="0" src="a.jpg">
  <img data-index="1" src="b.jpg">
  <img data-index="2" src="c.jpg">
  <img data-index="3" src="d.jpg">
</div>
<script src="dist/js/zx-image-view.min.js"></script>
<script>
  // 初始化参数
  var options = {
    // 见参数说明处
  };

  // 图片数组1
  var imgArray1 = [
    'http://xxx.com/a.jpg',
    'http://xxx.com/b.jpg',
    'http://xxx.com/c.jpg',
    'http://xxx.com/d.jpg'
  ];

  // 图片数组2
  var imgArray2 = [
    {
      url: 'http://xxx.com/a.jpg',
      // 初始化旋转角度
      angle: 90
    },
    {
      url: 'http://xxx.com/b.jpg',
      angle: 0
    },
    {
      url: 'http://xxx.com/c.jpg',
      angle: 180
    },
    {
      url: 'http://xxx.com/d.jpg'
      angle: 90
    }
  ];
</script>

使用方法 1

var ziv1 = new ZxImageView(options, imgArray1);

// 点击缩略图,查看大图
var $el = document.getElementById('imgList');
$el.addEventListener('click', function (e) {
  if (this.nodeName === 'IMG') {
    // 获取图片索引
    var index = this.getAttribute('data-index');
    // 查看图片
    ziv1.view(index);
  }
})

使用方法 2

var ziv2 = new ZxImageView(imgArray2);

使用方法 3

var ziv3 = new ZxImageView();
ziv3.init(imgArray2);

使用方法 4

var ziv4 = new ZxImageView();
// 业务场景,针对后台管理列表页,每条数据(动态)有多张图片,需独立预览,不需要多次实例化ZxImageView
// 查看imgArray2第3张图片
ziv4.view(2, imgArray2);

开发调试

npm run dev
# http://localhost:9000/

# 效果图 preview

image-view

image-view

image-view

参数 options

|参数|类型|说明| |:--|:--|:--| |backgroundOpacity|Floor|背景遮罩(黑色)透明度,取值0-1,默认值0.6| |iconfont|String|iconfont图标字体css样式url地址(样式名见附录iconfont说明)| |keyboard|Object|键盘按钮(前/后一张、缩放、旋转、关闭)配置| |movable|Boolean|移动图片,默认值true| |paginationable|Boolean|分页mouseover切换图片,默认值true| |rotatable|Boolean|旋转图片,默认值true| |scalable|Boolean|缩放图片,默认值true| |showClose|Boolean|显示关闭预览窗口按钮,默认值true| |showPagination|Boolean|显示分页栏,默认值true| |showSwitchArrow|Boolean|显示左右切换箭头按钮,默认值true| |showToolbar|Boolean|显示工具栏,默认值false| |toolbarButtons|Array|工具栏按钮数量及顺序配置,可选值/默认值['prev', 'enlarge', 'rotate', 'reduce', 'next']|

options.keyboard

|参数|类型|可选键名|说明| |:--|:--|:--|:--| |close|String|关闭图片查看器| |next|String|任意键|下一张| |prev|String|任意键或mousewheel|上一张;为mousewheel时,next无效| |rotate|String或Array|任意键或mousewheel|图片旋转| |scale|String或Array|任意键或mousewheel|图片缩放|

注意:参数中只能包含有且一个mousewheel配置;任何配置均不支持组合键。

keyboard参数可选属性见页尾--附录

 // 初始化参数
let _config = {
  // 分页mouseover切换图片
  paginationable: true,
  // 显示关闭按钮
  showClose: true,
  // 显示上一张/下一张箭头
  showSwitchArrow: true,
  // 显示分页导航栏
  showPagination: true,
  // 缩放
  scalable: true,
  // 旋转
  rotatable: true,
  // 移动
  movable: true,
  // 键盘配置
  keyboard: {
    prev: 'a',
    next: 'd',
    rotate: ['up', 'down'],
    scale: 'mousewheel'
  }
}
new ZxImageView(_config);

方法 methods

  • destroy() 销毁当前图片查看dom对象

  • init(imageArray, index) 初始化图片数据

|参数|类型|必须|说明| |:--|:--|:--|:--| |imageArray|Array|是|图片url数组| |index|Number|否|imageArray的索引,默认显示的第index + 1张图片;默认为0; 如果index > imageArray.length将被忽略|

  • view(index, angle, imageArray) 查看第index + 1张图片

|参数|类型|必须|说明| |:--|:--|:--|:--| |index|Number|是|imageArray的索引,显示的第index + 1张图片| |angle|Number|否|图片旋转角度,90的整数倍| |imageArray|Array|否|图片url数组,将更新初始化的图片数组|

附录

  • iconfont样式名说明

字体样式.zx,图标样式如下图:

zx-image-view iconfont

http://www.iconfont.cn/

  • 支持自定义键盘按钮名/keyboard参数可选属性

|属性|键名/说明| |:--|:--| |escape|Esc键| |主键盘| | |backquote| ~ 键| |digit1| 1(!) 键 | |digit2| 2(@) 键 | |digit3| 3(#) 键 | |digit4| 4($) 键 | |digit5| 5(%) 键 | |digit6| 6(^) 键 | |digit7| 7(&) 键 | |digit8| 8(*) 键 | |digit9| 9(() 键 | |digit0| 0()) 键 | |equal| =(+) 键 | |minus| -(-) 键 | |a-z|AZ键| |bracketLeft| [({) 键 | |bracketRight| ](}) 键 | |semicolon| ;(:) 键 | |quote| '(") 键 | |backslash| 反斜线 键 | |period| ,(>) 键 | |comma| .(<) 键 | |slash| /(?) 键 | |space| 空格键 | |数字键盘|| |numpad0| 0 | |numpad1| 1 | |numpad2| 2 | |numpad3| 3 | |numpad4| 4 | |numpad5| 5 | |numpad6| 6 | |numpad7| 7 | |numpad8| 8 | |numpad9| 9 | |numpadDivide| /分或除 | |numpadMultiply| *乘 | |numpadSubtract| -减 | |numpadAdd| +加 | |numpadDecimal| .小数点 | |编辑键区|| |insert| Insert 键 | |home| Home 键 | |end| End 键 | |pageUp| PageUp 键 | |pageDown| PageDown | |delete| Delete 键 | |left| 方向键左(ArrowLeft) | |right| 方向键右(ArrowRight) | |up| 方向键上(ArrowUp) | |down| 方向键下(ArrowDown) |

|鼠标滚动|说明| |:--|:--| |mousewheel|鼠标滚动键|

Copyright and license

Code and documentation copyright 2018. capricorncd. Code released under the MIT License.