Etusivu Tutki Apua
Kirjaudu sisään
ipu
/
android-share
Tarkkaile 6
Äänestä 0
Fork 0
Koodi Ongelmat 1 Pull-pyynnöt 1 Commitit 1033 Julkaisut 4 Wiki
Selaa lähdekoodia

Merge branch 'master' of http://10.1.235.20:3000/ipu/android-share

wangxl 8 vuotta sitten
vanhempi
d9bde4e1cf 55713e4d8d
commit
04ae254f9e
9 muutettua tiedostoa jossa 10 lisäystä ja 201 poistoa
Jaettu näkymä Näytä diff tilastot
  1. BIN
      display-server/web/biz/img/plugin/hammer/pano_1.jpg
  2. BIN
      display-server/web/biz/img/plugin/hammer/pano_1.png
  3. BIN
      display-server/web/biz/img/plugin/hammer/pano_2.jpg
  4. BIN
      display-server/web/biz/img/plugin/hammer/pano_2.png
  5. BIN
      display-server/web/biz/img/plugin/hammer/pano_3.jpg
  6. BIN
      display-server/web/biz/img/plugin/hammer/pano_3.png
  7. BIN
      display-server/web/biz/img/scene/test_character.png
  8. 0 191
      display-server/web/template/webapp/plugin/Hammer.html
  9. 10 10
      display-server/web/template/webapp/ui/Hammer.html

BIN
display-server/web/biz/img/plugin/hammer/pano_1.jpg
Näytä tiedosto


BIN
display-server/web/biz/img/plugin/hammer/pano_1.png
Näytä tiedosto


BIN
display-server/web/biz/img/plugin/hammer/pano_2.jpg
Näytä tiedosto


BIN
display-server/web/biz/img/plugin/hammer/pano_2.png
Näytä tiedosto


BIN
display-server/web/biz/img/plugin/hammer/pano_3.jpg
Näytä tiedosto


BIN
display-server/web/biz/img/plugin/hammer/pano_3.png
Näytä tiedosto


BIN
display-server/web/biz/img/scene/test_character.png
Näytä tiedosto


+ 0 - 191
display-server/web/template/webapp/plugin/Hammer.html
Näytä tiedosto 

@ -1,191 +0,0 @@
1 
<!DOCTYPE HTML>
2 
<html class="s_bs">
3 
<head>
4 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
6 
<title>Hammer</title>
7 
{%>template/common/Head.html%}
8 
<script type="text/javascript" src="biz/js/plugin/hammer.js"></script>
9 
</head>
10 
<style type="text/css">
11 
.hammer-wrap {
12 
	text-align: center;
13 
	margin-top: 0.22rem;
14 
}
15 
.hammer-wrap .hammer-icon {
16 
	width: 1rem;
17 
}
18 
.hammer-wrap h1 {
19 
	margin-top: 0.22rem;
20 
}
21 
.hammer-wrap h2 {
22 
	font-weight: normal;
23 
    line-height: 1.4;
24 
}
25 
.demo-box-wrap {
26 
  border: 1px solid #333;
27 
  /* font-family: sans-serif; */
28 
  background: #333;
29 
  text-align: center;
30 
  color: white;
31 
  width: 302px;
32 
  margin-left: auto;
33 
  margin-right: auto;
34 
  margin-bottom: 3em;
35 
}
36 
.demo-box-wrap .demo-box {
37 
  width: 300px;
38 
  height: 200px;
39 
  overflow: hidden;
40 
  position: relative;
41 
}
42 
.demo-box-wrap .demo-box > img {
43 
  height: 400px;
44 
  width: 1900px;
45 
  position: absolute;
46 
  margin-left: -950px;
47 
  display: none;
48 
  pointer-events: none;
49 
  margin-top: -220px;
50 
  left: 50%;
51 
  top: 50%;
52 
  max-width: none;
53 
}
54 
.demo-box-wrap h2 {
55 
  pointer-events: none;
56 
  color: white;
57 
}
58 
.demo-box-wrap .demo-box img.active {
59 
  display: block;
60 
}
61 
.demo-overlay {
62 
    position: absolute;
63 
    top: 0;
64 
    left: 0;
65 
    right: 0;
66 
    bottom: 0;
67 
    background: rgba(70, 70, 70, 0.8);
68 
    display: none;
69 
}
70 
.demo-overlay img {
71 
    width: 50px;
72 
    height: 50px;
73 
    position: absolute;
74 
    top: 50%;
75 
    left: 50%;
76 
    margin-left: -25px;
77 
    margin-top: -25px;
78 
}
79 
</style>
80 
<body>
81 
<div class="c_navBar">
82 
	<div class="left">
83 
		<div class="back">
84 
			<span class="e_ico-back"></span><span class="text">手势</span>
85 
		</div>
86 
	</div>
87 
</div>
88
89 
<div class="m_content" id="content">
90 
<div>
91 
	<div class="hammer-wrap">
92 
		<img src="biz/img/plugin/hammer/tap.png" class="hammer-icon">
93 
		<h1>Try it!</h1>
94 
		<h2 class="desc">你可以尝试单点图片，实现图片的切换</h2>
95 
		<div class="row">
96 
			<div class="column large-4 medium-6 small-12">
97 
				<div class="demo-box-wrap">
98 
					<h2>单点</h2>
99 
					<div class="demo-box tap" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
100 
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg">
101 
						<img src="biz/img/plugin/hammer/pano_2.jpg">
102 
						<img src="biz/img/plugin/hammer/pano_3.jpg">
103 
					</div>
104 
				</div>
105 
			</div>
106 
		</div>
107 
	</div>
108 
	<div class="hammer-wrap">
109 
		<img src="biz/img/plugin/hammer/press.png" class="hammer-icon">
110 
		<h1>Try it!</h1>
111 
		<h2 class="desc">您可以尝试按住图片，选中图片/取消选中</h2>
112 
		<div class="row">
113 
			<div class="column large-4 medium-6 small-12">
114 
				<div class="demo-box-wrap">
115 
				  	<h2>按住</h2>
116 
					<div class="demo-box press" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
117 
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg">
118 
					 	<div class="demo-overlay">
119 
							<img src="biz/img/plugin/hammer/circle-check.svg">
120 
						</div>
121 
					</div>
122 
				</div>
123 
			</div>
124 
		</div>
125 
	</div>
126 
	<div class="hammer-wrap">
127 
		<img src="biz/img/plugin/hammer/pan.png" class="hammer-icon">
128 
		<h1>Try it!</h1>
129 
		<h2 class="desc">您可以尝试平移图片，查看图片更多</h2>
130 
		<div class="row">
131 
			<div class="column large-4 medium-6 small-12">
132 
				<div class="demo-box-wrap">
133 
					<h2>平移</h2>
134 
					<div class="demo-box pan" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
135 
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg">
136 
					</div>
137 
				</div>
138 
			</div>
139 
		</div>
140 
	</div>
141 
	<div class="hammer-wrap">
142 
		<img src="biz/img/plugin/hammer/swipe.png" class="hammer-icon">
143 
		<h1>Try it!</h1>
144 
		<h2 class="desc">您可以尝试左右滑动，实现图片的切换</h2>
145 
		<div class="row">
146 
			<div class="column large-4 medium-6 small-12">
147 
				<div class="demo-box-wrap">
148 
					<h2>滑动</h2>
149 
					<div class="demo-box swipe" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
150 
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg">
151 
						<img src="biz/img/plugin/hammer/pano_2.jpg">
152 
						<img src="biz/img/plugin/hammer/pano_3.jpg">
153 
					</div>
154 
				</div>
155 
			</div>
156 
		</div>
157 
	</div>
158 
	<div class="hammer-wrap">
159 
		<img src="biz/img/plugin/hammer/rotate.png" class="hammer-icon">
160 
		<h1>Try it!</h1>
161 
		<h2 class="desc">您可以尝试旋转，实现图片的旋转</h2>
162 
		<div class="row">
163 
			<div class="column large-4 medium-6 small-12">
164 
				<div class="demo-box-wrap">
165 
					<h2>旋转</h2>
166 
					<div class="demo-box rotate" style="touch-action: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
167 
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg" style="transform: rotate(-2deg);">
168 
					</div>
169 
				</div>
170 
			</div>
171 
		</div>
172 
	</div>
173 
	<div class="hammer-wrap">
174 
		<img src="biz/img/plugin/hammer/pinch.png" class="hammer-icon">
175 
		<h1>Try it!</h1>
176 
		<h2 class="desc">您可以尝试捏放，实现图片的放大/缩小</h2>
177 
		<div class="row">
178 
			<div class="column large-4 medium-6 small-12">
179 
				<div class="demo-box-wrap">
180 
					<h2>捏放</h2>
181 
					<div class="demo-box pinch" style="touch-action: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
182 
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg" style="width: 2269.85px; margin-left: -1134.93px; height: 477.864px; margin-top: -262.825px;">
183 
					</div>
184 
				</div>
185 
			</div>
186 
		</div>
187 
	</div>
188 
</div>
189 
</div>
190 
</body>
191 
</html>

+ 10 - 10
display-server/web/template/webapp/ui/Hammer.html
Näytä tiedosto 

@ -97,9 +97,9 @@
97 97 
				<div class="demo-box-wrap">
98 98 
					<h2>单点</h2>
99 99 
					<div class="demo-box tap" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
100 
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg">
101 
						<img src="biz/img/plugin/hammer/pano_2.jpg">
102 
						<img src="biz/img/plugin/hammer/pano_3.jpg">
100 
						<img class="active" src="biz/img/plugin/hammer/pano_1.png">
101 
						<img src="biz/img/plugin/hammer/pano_2.png">
102 
						<img src="biz/img/plugin/hammer/pano_3.png">
103 103 
					</div>
104 104 
				</div>
105 105 
			</div>

@ -114,7 +114,7 @@
114 114 
				<div class="demo-box-wrap">
115 115 
				  	<h2>按住</h2>
116 116 
					<div class="demo-box press" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
117 
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg">
117 
						<img class="active" src="biz/img/plugin/hammer/pano_1.png">
118 118 
					 	<div class="demo-overlay">
119 119 
							<img src="biz/img/plugin/hammer/circle-check.svg">
120 120 
						</div>

@ -132,7 +132,7 @@
132 132 
				<div class="demo-box-wrap">
133 133 
					<h2>平移</h2>
134 134 
					<div class="demo-box pan" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
135 
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg">
135 
						<img class="active" src="biz/img/plugin/hammer/pano_1.png">
136 136 
					</div>
137 137 
				</div>
138 138 
			</div>

@ -147,9 +147,9 @@
147 147 
				<div class="demo-box-wrap">
148 148 
					<h2>滑动</h2>
149 149 
					<div class="demo-box swipe" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
150 
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg">
151 
						<img src="biz/img/plugin/hammer/pano_2.jpg">
152 
						<img src="biz/img/plugin/hammer/pano_3.jpg">
150 
						<img class="active" src="biz/img/plugin/hammer/pano_1.png">
151 
						<img src="biz/img/plugin/hammer/pano_2.png">
152 
						<img src="biz/img/plugin/hammer/pano_3.png">
153 153 
					</div>
154 154 
				</div>
155 155 
			</div>

@ -164,7 +164,7 @@
164 164 
				<div class="demo-box-wrap">
165 165 
					<h2>旋转</h2>
166 166 
					<div class="demo-box rotate" style="touch-action: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
167 
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg" style="transform: rotate(-2deg);">
167 
						<img class="active" src="biz/img/plugin/hammer/pano_1.png" style="transform: rotate(-2deg);">
168 168 
					</div>
169 169 
				</div>
170 170 
			</div>

@ -179,7 +179,7 @@
179 179 
				<div class="demo-box-wrap">
180 180 
					<h2>捏放</h2>
181 181 
					<div class="demo-box pinch" style="touch-action: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
182 
						<img class="active" src="biz/img/plugin/hammer/pano_1.jpg" style="width: 2269.85px; margin-left: -1134.93px; height: 477.864px; margin-top: -262.825px;">
182 
						<img class="active" src="biz/img/plugin/hammer/pano_1.png" style="width: 2269.85px; margin-left: -1134.93px; height: 477.864px; margin-top: -262.825px;">
183 183 
					</div>
184 184 
				</div>
185 185 
			</div>