zx-image-view 이미지 미리보기 플러그인과 관련하여 회전, 크기 조정 및 이동 관련 작업을 지원합니다.-JS 튜토리얼-php.cn

이미지 미리보기 플러그인, 이미지 전환, 회전, 크기 조정, 이동 지원...

브라우저 지원: IE10+, (IE9는 회전 기능을 지원하지 않음)

소스 코드 주소: https://github.com/zx1984/ image-view

데모 주소: https://zx1984.github.io/image-view/dist/

기본 키보드 작동

방향 키: 왼쪽왼쪽오른쪽오른쪽 전후 사진 전환, 위 <code>위 아래 아래 시계 방향 및 시계 반대 방향 회전 left右right前后图片切换，上up下down顺时针逆时针旋转

滚动鼠标：缩放

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

# 效果图 preview

zx-image-view 이미지 미리보기 플러그인과 관련하여 회전, 크기 조정 및 이동 관련 작업을 지원합니다.

演示地址：https://zx1984.github.io/image-view/dist/

使用 use

npm

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

로그인 후 복사

ES6+

import { ZxImageView } from &#39;zx-image-view&#39;

로그인 후 복사

浏览器Brower

<p id="imgList">
  <img  data-index="0" src="a.jpg" alt="zx-image-view 이미지 미리보기 플러그인과 관련하여 회전, 크기 조정 및 이동 관련 작업을 지원합니다." >
  <img  data-index="1" src="b.jpg" alt="zx-image-view 이미지 미리보기 플러그인과 관련하여 회전, 크기 조정 및 이동 관련 작업을 지원합니다." >
  <img  data-index="2" src="c.jpg" alt="zx-image-view 이미지 미리보기 플러그인과 관련하여 회전, 크기 조정 및 이동 관련 작업을 지원합니다." >
  <img  data-index="3" src="d.jpg" alt="zx-image-view 이미지 미리보기 플러그인과 관련하여 회전, 크기 조정 및 이동 관련 작업을 지원합니다." ></p><script src="dist/js/zx-image-view.min.js"></script><script>
  // 初始化参数
  var options = {    // 见参数说明处
  };  // 图片数组1
  var imgArray1 = [    &#39;http://xxx.com/a.jpg&#39;,    &#39;http://xxx.com/b.jpg&#39;,    &#39;http://xxx.com/c.jpg&#39;,    &#39;http://xxx.com/d.jpg&#39;
  ];  // 图片数组2
  var imgArray2 = [
    {
      url: &#39;http://xxx.com/a.jpg&#39;,      // 初始化旋转角度
      angle: 90
    },
    {
      url: &#39;http://xxx.com/b.jpg&#39;,
      angle: 0
    },
    {
      url: &#39;http://xxx.com/c.jpg&#39;,
      angle: 180
    },
    {
      url: &#39;http://xxx.com/d.jpg&#39;
      angle: 90
    }
  ];</script>

로그인 후 복사

使用方法 1

var ziv1 = new ZxImageView(options, imgArray1);// 点击缩略图，查看大图var $el = document.getElementById(&#39;imgList&#39;);
$el.addEventListener(&#39;click&#39;, function (e) {
  if (this.nodeName === &#39;IMG&#39;) {    // 获取图片索引
    var index = this.getAttribute(&#39;data-index&#39;);    // 查看图片
    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 start# http://localhost:9000/

로그인 후 복사

参数 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`

options.keyboard

스크롤 마우스: 확대/축소 참고: 사용자 정의 버튼 구성 지원, 자세한 내용은 매개변수 설명을 참조하세요. # 효과 사진 미리보기

参数	类型	可选键名	说明
close	String	关闭图片查看器
next	String	任意键	下一张
prev	String	任意键或`mousewheel`	上一张；为`mousewheel`时，next无效
rotate	String或Array	任意键或`mousewheel`	图片旋转
scale	String或Array	任意键或`mousewheel`

zx-image-view 이미지 미리보기 플러그인 🎜

데모 주소: https://zx1984.github.io/image-view /dist/🎜

use🎜

npm🎜

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

로그인 후 복사

ES6+🎜rrreee

BrowserBrowser🎜rrreee

방법 1 사용🎜rrreee

방법 2 사용🎜rrreee

방법 3 사용 🎜rrreee

사용 방법 4🎜rrreee

개발 및 디버깅🎜rrreee

매개변수 옵션🎜🎜🎜BackgroundOpacity🎜🎜Floor🎜🎜배경 마스크(검은색) 투명도, 값 0-1, 기본값 0.6🎜🎜🎜iconfont🎜🎜String🎜🎜iconfont 아이콘 글꼴 CSS 스타일 URL 주소(스타일은 부록 아이콘 글꼴 설명 참조) name)🎜🎜 🎜keyboard🎜🎜Object🎜🎜키보드 버튼(이전/다음 사진, 확대/축소, 회전, 닫기) 구성🎜🎜🎜movable🎜🎜Boolean🎜🎜모바일 이미지, 기본값

true </code >🎜🎜<tr>🎜paginationable🎜🎜Boolean🎜🎜페이지 매김 마우스 오버로 사진 전환, 기본값<code>true

🎜🎜🎜rotatable🎜🎜Boolean🎜🎜사진 회전, 기본값true< /code>🎜🎜<tr>🎜scalable🎜🎜Boolean🎜🎜 이미지 크기 조정, 기본값<code>true🎜🎜🎜showClose🎜🎜Boolean🎜🎜미리보기 창 닫기 버튼 표시, 기본값 valuetrue🎜🎜🎜showPagination🎜🎜Boolean🎜🎜은 페이징 막대를 표시하고 기본값은true🎜🎜🎜showSwitchArrow🎜🎜Boolean🎜🎜을 표시합니다. 왼쪽 및 오른쪽 전환 화살표 버튼, 기본값 true🎜🎜🎜showToolbar🎜🎜Boolean🎜🎜Show Toolbar, 기본값 false🎜🎜🎜🎜

options.keyboard

매개변수	유형	설명

🎜🎜close🎜🎜String🎜🎜이미지 뷰어 닫기🎜🎜< br/>🎜🎜< tr>🎜next🎜🎜String🎜🎜모든 키🎜🎜next🎜🎜🎜prev🎜🎜String🎜🎜모든 키 또는 마우스휠🎜🎜previous; >마우스휠, 다음은 유효하지 않습니다🎜🎜🎜rotate🎜🎜String 또는 Array🎜🎜모든 키 또는 마우스휠🎜🎜사진 회전🎜🎜🎜scale🎜🎜String 또는 Array🎜 🎜모든 키 또는 마우스휠🎜🎜사진 확대/축소🎜🎜🎜🎜

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

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

 // 初始化参数let _config = {  // 分页mouseover切换图片
  paginationable: true,  // 显示关闭按钮
  showClose: true,  // 显示上一张/下一张箭头
  showSwitchArrow: true,  // 显示分页导航栏
  showPagination: true,  // 缩放
  scalable: true,  // 旋转
  rotatable: true,  // 移动
  movable: true,  // 键盘配置
  keyboard: {
    prev: &#39;a&#39;,
    next: &#39;d&#39;,
    rotate: [&#39;up&#39;, &#39;down&#39;],
    scale: &#39;mousewheel&#39;
  }
}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数组，将更新初始化的图片数组

Appendix

아이콘 글꼴 스타일 이름 설명

글꼴 스타일 .zx, 아이콘 스타일은 아래와 같습니다. .zx，图标样式如下图：

zx-image-view iconfont

http://www.iconfont.cn/

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

http://www.iconfont.cn/Attributes키 이름/설명escapeEsc 키기본 키보드

属性	键名/说明
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	`A`至`Z`键
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
numpadpide	`/`分或除
numpadMultiply	`*`乘
numpadSubtract	`-`减
numpadAdd	`+`加
numpadDecimal	`.`
	사용자 정의 지원 키보드 버튼 이름/키보드 매개변수 선택 속성




역인용	~ 키
digit1	`1(!)` 키
digit2	`2(@)` 키
digit3	`3(#)` 키
digit4	`4($)` 키
digit5	`5(%) code> 키`

digit66(^) 키 7(&) 키

	digit7
digit8	`8(*)` 키

digit9

9(() 키

🎜🎜🎜digit0🎜🎜0()) 키 🎜🎜 🎜🎜equal🎜🎜=(+) 키 🎜🎜🎜🎜minus🎜🎜-(-) 키 🎜🎜🎜🎜a-z🎜🎜AZ 키🎜🎜🎜🎜bracketLeft🎜🎜[({) key🎜🎜🎜🎜bracketRight🎜🎜](}) 키로 🎜 🎜🎜🎜세미콜론🎜🎜;(:) 키 🎜🎜🎜🎜quote🎜🎜'(") 키 🎜🎜🎜🎜backslash🎜🎜

 백슬래시  키 🎜🎜🎜🎜기간🎜🎜,(>) 키 🎜🎜🎜🎜comma🎜🎜.( 키 🎜🎜🎜🎜슬래시 🎜 🎜<code>/(?) 키 🎜🎜🎜🎜space🎜🎜스페이스 바🎜🎜🎜🎜숫자 키보드🎜🎜🎜🎜🎜🎜🎜numpad0🎜🎜0🎜🎜🎜 🎜numpad1 🎜🎜1🎜🎜 🎜 🎜numpad2🎜🎜2🎜🎜🎜🎜numpad3🎜🎜3🎜🎜🎜🎜numpad4🎜🎜4🎜🎜🎜🎜numpad5🎜🎜5🎜🎜🎜🎜numpad6 🎜🎜6🎜🎜🎜🎜numpad7🎜🎜7🎜🎜🎜🎜 numpad8🎜🎜8🎜🎜🎜🎜numpad9🎜🎜9🎜🎜🎜🎜numpadpide🎜🎜/ 나누기 또는 나누기🎜🎜🎜🎜numpadMultiply🎜🎜* 곱하기🎜 🎜🎜🎜 numpadSubtract🎜🎜-Subtract🎜🎜🎜🎜numpadAdd🎜🎜+Add🎜🎜🎜🎜numpadDecimal🎜🎜.소수점🎜🎜🎜🎜Edit 키 영역🎜🎜🎜🎜🎜🎜🎜insert🎜🎜키 삽입🎜🎜🎜🎜home🎜🎜Home 키🎜🎜🎜🎜end🎜🎜End 키🎜🎜🎜🎜pageUp🎜 🎜PageUp 키🎜🎜🎜🎜pageDown🎜🎜PageDown🎜 🎜 🎜🎜delete🎜🎜삭제 키🎜🎜🎜🎜left🎜🎜ArrowLeft🎜🎜🎜🎜right🎜🎜ArrowRight 위쪽)🎜🎜🎜🎜 아래쪽 🎜🎜 아래쪽 화살표 🎜

위 내용은 zx-image-view 이미지 미리보기 플러그인과 관련하여 회전, 크기 조정 및 이동 관련 작업을 지원합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!