forked from FeiLong2014/FeiImageView
-
Notifications
You must be signed in to change notification settings - Fork 0
/
viewpanel.html
74 lines (73 loc) · 3.08 KB
/
viewpanel.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="dist/fImageView.min.js"></script>
</head>
<body>
<center>
<div id="con" style="margin:0 auto;width:610px;height:610px;border:1px solid #58AFD6;position:relative"></div>
<script type="text/javascript">
var panel = new Fei.fImagePanel({
images: ['images/img.jpg', 'images/1.jpg', 'images/2.jpg']
}).render(document.getElementById('con'));
function stretchH() {
panel.stretchH().centerImage().doChange();
}
function stretchV() {
panel.stretchV().centerImage().doChange();
}
function originalOptimally() {
panel.originalOptimally().centerImage().doChange();
}
function stretchOptimally() {
panel.stretchOptimally().centerImage().doChange();
}
function centerImage() {
panel.centerImage().doChange();
}
function zoomIn() {
panel.scale(1.1).doChange();
}
function zoomOut() {
panel.scale(0.9).doChange();
}
function rotateClockwise() {
panel.rotate(90).doChange();
}
function rotateAntiClockwise() {
panel.rotate(-90).doChange();
}
function rotateTo() {
var val = parseInt(document.getElementById('rotateTo').value, 10);
panel.rotate(val).doChange();
}
function upImage() {
panel.upImage();
}
function nextImage() {
panel.nextImage();
}
</script>
<div style="width:602px;margin:0 auto;display:block;margin-top:20px;line-height:30px">
<input type="button" value="垂直拉伸" onclick="stretchH()" />
<input type="button" value="水平拉伸" onclick="stretchV()" />
<input type="button" value="原始尺寸" onclick="originalOptimally()" />
<input type="button" value="最佳显示" onclick="stretchOptimally()" />
<input type="button" value="图片居中" onclick="centerImage()" />
<input type="button" value="放大" onclick="zoomIn()" />
<input type="button" value="缩小" onclick="zoomOut()" />
<br />
<input type="button" value="顺时针旋转90" onclick="rotateClockwise()" />
<input type="button" value="逆时针旋转90" onclick="rotateAntiClockwise()" />
<span style="display:inline">
旋转<input type="text" style="width:60px" id="rotateTo" value="15" />度<input type="button" value="旋转" onclick="rotateTo()" />
</span>
<br />
<input type="button" value="上一张" onclick="upImage()" />
<input type="button" value="下一张" onclick="nextImage()" />
</div>
</center>
</body>
</html>