-
Notifications
You must be signed in to change notification settings - Fork 0
/
Create looks and express your style - Polyvore.html
326 lines (267 loc) · 28.7 KB
/
Create looks and express your style - Polyvore.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0031)http://www.polyvore.com/cgi/app -->
<html lang="en" class="hb-loaded"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Create looks and express your style - Polyvore</title><meta name="Content-Type" content="text/html; charset=utf-8"><meta name="description" content="Create beautiful collages with a fun, easy-to-use web app."><link rel="publisher" href="https://plus.google.com/+polyvore"><meta content="656C5BA5EC6962A6CEF8FB980A78E3FD" name="msvalidate.01"><meta http-equiv="imagetoolbar" content="no"><link rel="shortcut icon" href="http://akwww.polyvorecdn.com/rsrc/img/favicon2.ico"><link rel="apple-touch-icon-precomposed" href="http://akwww.polyvorecdn.com/rsrc/img/logos/apple-touch-icon-114x114-precomposed.png"><style type="text/css">
/*
This CSS resource incorporates links to font software which is
the valuable copyrighted property of WebType LLC, The Font Bureau,
and/or their suppliers. You may not
attempt to copy, install, redistribute, convert, modify or reverse
engineer this font software. Please contact WebType with any
questions: http://www.webtype.com
*/
@font-face {
font-family: "freight-display-pro";
src: url("http://akwww.polyvorecdn.com/rsrc/webtype/cd4841f7-d290-4d8f-b256-804190f86023-2.eot");
src: url("http://akwww.polyvorecdn.com/rsrc/webtype/cd4841f7-d290-4d8f-b256-804190f86023-2.eot?") format("embedded-opentype"),
url("http://akwww.polyvorecdn.com/rsrc/webtype/cd4841f7-d290-4d8f-b256-804190f86023-3.woff") format("woff"),
url("http://akwww.polyvorecdn.com/rsrc/webtype/cd4841f7-d290-4d8f-b256-804190f86023-1.ttf") format("truetype"),
url("http://akwww.polyvorecdn.com/rsrc/webtype/cd4841f7-d290-4d8f-b256-804190f86023-4.svg#web") format("svg");
font-style: italic;
font-weight: normal;
}
@font-face {
font-family: "freight-text-pro";
src: url("http://akwww.polyvorecdn.com/rsrc/webtype/faba440d-5298-4723-817c-049ad12c4176-2.eot");
src: url("http://akwww.polyvorecdn.com/rsrc/webtype/faba440d-5298-4723-817c-049ad12c4176-2.eot?") format("embedded-opentype"),
url("http://akwww.polyvorecdn.com/rsrc/webtype/faba440d-5298-4723-817c-049ad12c4176-3.woff") format("woff"),
url("http://akwww.polyvorecdn.com/rsrc/webtype/faba440d-5298-4723-817c-049ad12c4176-1.ttf") format("truetype"),
url("http://akwww.polyvorecdn.com/rsrc/webtype/faba440d-5298-4723-817c-049ad12c4176-4.svg#web") format("svg");
font-style: italic;
font-weight: normal;
}
</style>
<link rel="stylesheet" href="./Create looks and express your style - Polyvore_files/montage-1a5a7f39abf007409cc91669a10e99aa.css" type="text/css">
<noscript>
&amp;amp;lt;img src="http://b.scorecardresearch.com/p?c1=2&amp;amp;amp;c2=10258624&amp;amp;amp;cv=2.0&amp;amp;amp;cj=1" /&amp;amp;gt;
</noscript>
<style type="text/css"></style></head><body style="overflow: hidden; padding: 0px; margin: 0px; height: 100%;" class=" wk win" id="body" huaban_collector_injected="true" data-feedly-mini="yes" ryt12771="1">
<div id="progress"></div><div id="polyvore_css_load_test" style="position:absolute; width: 0px; height: 0px; left: -1000px"></div><div class="new_header compact" id="headercontainer" trackcontext="masthead"><div id="header_container"><div id="header" trackcontext="primary_nav"><div class="logo" id="nav_logo"><a href="#"><img width="162" alt="Polyvore" src="./Create looks and express your style - Polyvore_files/logo_noborder_white_trans_162x17.png" title="Polyvore" height="17"></a></div><div class="compact_nav" id="nav_feed"></div><div class="compact_nav" id="nav_trending"><a href="#">趋势</a></div><div class="compact_nav menu_item" id="nav_shop"><div class="mod_subnav" id="subnav96646bbc" _uid="444"><a href="#" class="">商店</a> <ul class=" dock_bl"><li class=" first"><a href="#">Just In</a></li><li class="separated"><a href="#">On Sale</a></li><li class=""><a href="#">Dresses</a></li><li class=""><a href="#">Skirts</a></li><li class=""><a href="#">Shoes</a></li><li class=""><a href="#">Bags</a></li><li class=""><a href="#">Jewelry</a></li><li class=""><a href="#">Beauty</a></li><li class=""><a href="#">Furniture</a></li><li class=" last"><a href="#">Decor</a></li></ul></div></div><div class="compact_nav menu_item selected" id="nav_create"><a href="#">创建</a></div><div class="menu_item" id="nav_signin"><span oid="re" class="clickable" onclick="SignInBox.register({"page":"app","src":"nav","onSuccess":reloadPage}); return false;" style="
font-size: 16px;
font-style: normal;
">注册</span></div><div class="menu_item" id="nav_login"><span oid="lo" class="clickable" onclick="SignInBox.signIn({"page":"app","src":"nav","onSuccess":reloadPage}); return false;" style="
font-style: normal;
font-size: 16px;
">登录</span></div></div></div></div>
<table id="app" class="wide" cellpadding="0" cellspacing="8" style="height: 863px;">
<tbody><tr valign="top" height="100%">
<td id="container" width="60%">
<div id="canvas" trackcontext="canvas" class="unlocked" _uid="76" style="height: 854px;"><div class="handles handles_border hidden invisible" style="display: none; visibility: hidden;"><div class="handle n resize" _uid="37" style="cursor: n-resize;"></div><div class="handle s resize" _uid="44" style="cursor: s-resize;"></div><div class="handle nw resize" _uid="46" style="cursor: nw-resize;"></div><div class="handle ne resize" _uid="48" style="cursor: ne-resize;"></div><div class="handle se resize" _uid="50" style="cursor: se-resize;"></div><div class="handle sw resize" _uid="52" style="cursor: sw-resize;"></div><div class="handle w resize" _uid="54" style="cursor: w-resize;"></div><div class="handle e resize" _uid="56" style="cursor: e-resize;"></div><div class="handle n rotate" _uid="58" style="cursor: url(http://akwww.polyvorecdn.com/rsrc/img/rotate_arrow.cur) 13 4, crosshair;"><div class="rotatetip"></div></div><div class="filling" _uid="63"></div></div><div class="emptymsg"><div><div class="heading">Create a collage</div><div class="subheading">Start by dragging items here.</div></div></div><input id="fakeInput"><div class="multiselect"></div><div class="statusbar" _uid="121"><div id="statustext" class=""></div></div><div class="NE" _uid="134"><ul class="toolbar horizontal itemactions unselectable" _uid="135" unselectable="on"><li class="controls remove_btn"><button id="remove_btn" trackelement="remove_btn" _uid="26796" title=""><div class="sprite ">删除</div></button></li><li class="controls flop_btn"><button id="flop_btn" trackelement="flop_btn" _uid="26800" title=""><div class="sprite ">水平翻转</div></button></li><li class="controls flip_btn"><button id="flip_btn" trackelement="flip_btn" _uid="26804" title=""><div class="sprite ">垂直翻转</div></button></li><li class="controls clone_btn"><button id="clone_btn" trackelement="clone_btn" _uid="26822" title=""><div class="sprite ">复制</div></button></li><li class="controls fgnd_btn"><button id="fgnd_btn" trackelement="fgnd_btn" _uid="26826" title=""><div class="sprite ">置顶</div></button></li><li class="controls bkgd_btn"><button id="bkgd_btn" trackelement="bkgd_btn" _uid="26830" title=""><div class="sprite ">置底</div></button></li></ul><div class="clear"></div><div id="bg_btns" class="controls right"></div><div class="iteminfo right"></div></div><div class="NW" _uid="137"><ul class="toolbar vertical controls canvasactions unselectable" _uid="138" unselectable="on" style="display: block; visibility: inherit;"><li class="" style="display: block; visibility: inherit;"><button id="publish_btn" class=" txt " trackelement="publish_btn" _uid="139" title="">发布</button></li><li class="hidden invisible" style="display: none; visibility: hidden;"><button id="publish_template_btn" class=" txt " trackelement="publish_template_btn" _uid="145" title="Templates require at least 1 placeholder." disabled="true">Publish</button></li><li class="hidden invisible" style="display: none; visibility: hidden;"><button id="submit_contest_btn" class=" txt " trackelement="submit_contest_btn" _uid="150" title="">Enter contest</button></li><li class="hidden invisible" style="display: none; visibility: hidden;"><button id="save_btn" class=" txt " trackelement="save_btn" _uid="156" title="">Save Draft</button></li><li><button id="open_btn" class=" txt " trackelement="open_btn" _uid="162" title="">打开</button></li><li class="new_btn" style="display: block; visibility: inherit;"><button id="new_btn" class=" txt " trackelement="new_btn" _uid="168" title="">新建</button></li><li class="hr clearfix"></li><li class="undo_btn" style="display: block; visibility: inherit;"><button id="undo_btn" class=" sprited " trackelement="undo_btn" _uid="174" title="" disabled="true"><div class="sprite "></div></button></li><li class="redo_btn" style="display: block; visibility: inherit;"><button id="redo_btn" class=" sprited " trackelement="redo_btn" _uid="180" title="" disabled="true"><div class="sprite "></div></button></li><li class="hr clearfix"></li><li class="hidden invisible" style="display: none; visibility: hidden;"><button id="edit_btn" class=" txt " trackelement="edit_btn" _uid="185" title="">Edit template</button></li><li class="zoom_in" style="display: block; visibility: inherit;"><button id="zoom_in" class=" sprited " trackelement="zoom_in" _uid="190" title=""><div class="sprite "></div></button></li><li class="zoom_out" style="display: block; visibility: inherit;"><button id="zoom_out" class=" sprited " trackelement="zoom_out" _uid="195" title=""><div class="sprite "></div></button></li><li class="fit_btn" style="display: block; visibility: inherit;"><button id="fit_btn" class=" sprited " trackelement="fit_btn" _uid="201" title=""><div class="sprite "></div></button></li><li class="hidden invisible" style="display: none; visibility: hidden;"><button id="clearph_btn" class=" txt " trackelement="clearph_btn" _uid="206" title="" disabled="true">Start over</button></li></ul></div><div class="item selectNode unselectable" _uid="295" unselectable="on" style="left: 422.899px; top: 291.384px; z-index: 1; transform: matrix(0.83603, 0.54864, -0.54864, 0.83603, 0, 0);" controlthis="false"><img _uid="292" src="./Create looks and express your style - Polyvore_files/142979295.png" width="125" height="370" style="width: 125px; height: 370px;"></div><div class="item selectNode unselectable" _uid="307" unselectable="on" style="left: 289.235px; top: 168.192px; z-index: 2; transform: matrix(0.97795, -0.20845, 0.20845, 0.97795, 0, 0);" controlthis="false"><img _uid="304" src="./Create looks and express your style - Polyvore_files/142652570.png" width="129" height="259" style="width: 129px; height: 259px;"></div><div class="item selectNode unselectable" _uid="316" unselectable="on" style="left: 685.935px; top: 246.74px; z-index: 3; transform: matrix(1, 0, 0, 1, 0, 0);" controlthis="false"><img _uid="313" src="./Create looks and express your style - Polyvore_files/142979295.png" width="106" height="315" style="width: 106px; height: 315px;"></div><div class="item selectNode unselectable" _uid="325" unselectable="on" style="left: 769.227px; top: 258.746px; z-index: 4; transform: matrix(-1, 0, 0, -1, 0, 0);" controlthis="false"><img _uid="322" src="./Create looks and express your style - Polyvore_files/142979295.png" width="106" height="315" style="width: 106px; height: 315px;"></div><div class="item selectNode unselectable" _uid="334" unselectable="on" style="left: 495.844px; top: 497.599px; z-index: 5; transform: matrix(1, 0, 0, 1, 0, 0);" controlthis="false"><img _uid="331" src="./Create looks and express your style - Polyvore_files/143171637.png" width="113" height="150" style="width: 113px; height: 150px;"></div><div class="item selectNode unselectable" _uid="343" unselectable="on" style="left: 655.543px; top: 167.432px; z-index: 6; transform: matrix(1, 0, 0, 1, 0, 0);" controlthis="false"><img _uid="340" src="./Create looks and express your style - Polyvore_files/142652570.png" width="74" height="150" style="width: 74px; height: 150px;"></div><div class="item selectNode unselectable" _uid="352" unselectable="on" style="left: 164.735px; top: 516.426px; z-index: 7; transform: matrix(1, 0, 0, 1, 0, 0);" controlthis="false"><img _uid="349" src="./Create looks and express your style - Polyvore_files/144153940.png" width="79" height="137" style="width: 79px; height: 137px;"></div><div class="item selectNode unselectable" _uid="361" unselectable="on" style="left: 672.622px; top: 503.845px; z-index: 8; transform: matrix(1, 0, 0, 1, 0, 0);" controlthis="false"><img _uid="358" src="./Create looks and express your style - Polyvore_files/142500408.png" width="82" height="153" style="width: 82px; height: 153px;"></div><div class="item selectNode unselectable" _uid="370" unselectable="on" style="left: 530.606px; top: 209.221px; z-index: 9; transform: matrix(1, 0, 0, 1, 0, 0);" controlthis="false"><img _uid="367" src="./Create looks and express your style - Polyvore_files/142979295.png" width="106" height="315" style="width: 106px; height: 315px;"></div><div class="item selectNode unselectable" _uid="379" unselectable="on" style="left: 878.415px; top: 430.815px; z-index: 10; transform: matrix(1, 0, 0, 1, 0, 0);" controlthis="false"><img _uid="376" src="./Create looks and express your style - Polyvore_files/140518830.png" width="97" height="150" style="width: 97px; height: 150px;"></div><div class="item selectNode unselectable" _uid="388" unselectable="on" style="left: 771.34px; top: 600.402px; z-index: 11; transform: matrix(0.91354, 0.4067, -0.4067, 0.91354, 0, 0);" controlthis="false"><img _uid="385" src="./Create looks and express your style - Polyvore_files/140493528.png" width="74" height="150" style="width: 74px; height: 150px;"></div><div class="item selectNode unselectable" _uid="397" unselectable="on" style="left: 866.456px; top: 622.913px; z-index: 12; transform: matrix(1, 0, 0, 1, 0, 0);" controlthis="false"><img _uid="394" src="./Create looks and express your style - Polyvore_files/139427208.png" width="88" height="150" style="width: 88px; height: 150px;"></div><div class="item selectNode unselectable" _uid="406" unselectable="on" style="left: 250.809px; top: 150.715px; z-index: 13; transform: matrix(0.90201, 0.43172, -0.43172, 0.90201, 0, 0);" controlthis="false"><img _uid="403" src="./Create looks and express your style - Polyvore_files/141226995.png" width="270" height="450" style="width: 270px; height: 450px;"></div><div class="item selectNode unselectable selected" _uid="415" unselectable="on" style="left: 481.188px; top: 77.1719px; z-index: 14; transform: matrix(1, 0, 0, 1, 0, 0);" controlthis="false"><img _uid="412" src="./Create looks and express your style - Polyvore_files/142652218.png" width="82" height="150" style="width: 82px; height: 150px;"></div><div class="item selectNode unselectable" _uid="424" unselectable="on" style="left: 892.171px; top: 310.004px; z-index: 15; transform: matrix(1, 0, 0, 1, 0, 0);" controlthis="false"><img _uid="421" src="./Create looks and express your style - Polyvore_files/138882572.png" width="77" height="150" style="width: 77px; height: 150px;"></div></div>
</td>
<td width="40%">
<div id="panel"><div class="tabpanel js_1"><div class="tabs default" trackcontext="tabs"><span class="tab auto unselectable selected" trackelement="fashion" href="#foo" _uid="216" unselectable="on"><center title="Fashion">时尚</center></span><span class="tab auto unselectable" trackelement="home" href="#foo" _uid="222" unselectable="on"><center title="Home">我的</center></span><br class="clear"></div><div class="panels bordered" trackcontext="tabs"><div class="panel panel_size_undefined" trackcontext="fashion" style="display: block;"><div style="overflow: auto; display: block; height: 830px;"><div class="blank_tab"><div class="section clearfix"><h4>搜索</h4><form class="query_form" _uid="236"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="query_cell"><input type="text" name="query" class="query" _uid="453" autocomplete="off"></td><td><input type="submit" class="btn" value="Search"></td></tr></tbody></table></form></div><div class="section clearfix"><h4>浏览</h4><ul class="keywords clearfix"><li _uid="238"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/98094797.jpg"><br><span class="clickable">上衣</span></li><li _uid="240"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/98094788.jpg"><br><span class="clickable">外套</span></li><li _uid="242"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/98094800.jpg"><br><span class="clickable">连衣裙</span></li><li _uid="244"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/98094786.jpg"><br><span class="clickable">牛仔裤</span></li><li _uid="246"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/98094782.jpg"><br><span class="clickable">裤子</span></li><li _uid="248"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/98094802.jpg"><br><span class="clickable">短裙</span></li><li _uid="250"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/98103974.jpg"><br><span class="clickable">短裤</span></li><li _uid="252"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/98094774.jpg"><br><span class="clickable">鞋子</span></li><li _uid="254"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/98103676.jpg"><br><span class="clickable">手袋</span></li><li _uid="256"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/98103675.jpg"><br><span class="clickable">帽子</span></li><li _uid="258"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/98094770.jpg"><br><span class="clickable">饰品</span></li><li _uid="260"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/98094766.jpg"><br><span class="clickable">彩妆</span></li><li _uid="262"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/37078319.jpg"><br><span class="clickable">会员与发布</span></li><li _uid="264"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/126849492.jpg"><br><span class="clickable">加大加小</span></li></ul></div><div class="section clearfix"><h4>装饰</h4><ul class="keywords clearfix"><li _uid="266"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/15935618.jpg"><br><span class="clickable">背景</span></li><li _uid="268"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/29232373.jpg"><br><span class="clickable">文本</span></li><li _uid="270"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/31138368.jpg"><br><span class="clickable">音乐 </span></li><li _uid="272"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/32955884.jpg"><br><span class="clickable">颜色</span></li><li _uid="274"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/8274421.jpg"><br><span class="clickable">边框</span></li><li _uid="276"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/28926932.jpg"><br><span class="clickable">杂志文章</span></li><li _uid="278"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/36466883.jpg"><br><span class="clickable">123 ♥ →</span></li><li _uid="280"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/34185619.jpg"><br><span class="clickable">效果与纹理</span></li><li _uid="282"><img width="50" height="50" title="" src="./Create looks and express your style - Polyvore_files/34395110.jpg"><br><span class="clickable">模式与覆盖</span></li></ul></div></div></div></div><div class="panel panel_size_undefined" trackcontext="home" style="display: none;"></div></div></div></div>
</td>
</tr>
</tbody></table>
><div class="offscreen"></div>
<style>
.p{
position: absolute;
width: 1px;
height: 1px;
background: black;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script>
var debug = function(){};
var Rotate = function( $el ){
var startEvent ;
var boxRotate = 0 ;// $el.attr("style").match(/\d+/)[0]*1 || 0;
var $p = $("<div></div>").addClass("p").css({left:"50%",top:"50%"}).appendTo($el);
var dist = function(p1,p2){
return Math.pow(Math.pow(p1.x - p2.x,2) + Math.pow( p1.y - p2.y , 2 ),0.5);
};
var getDeg = window.j = function( e ){
var o = { x : $p.offset().left , y : $p.offset().top }
var s = { x : startEvent.clientX , y : startEvent.clientY};
var m = { x : ( s.x + e.x ) * 0.5 , y : ( s.y + e.y ) * 0.5 };
var deg = Math.atan( dist( m , e ) / dist( m , o ) ) * 180 / Math.PI;
debug( s );
debug( e );
debug( o );
debug( m );
deg = deg * 2;
deg = deg * ( e.x > s.x ? 1 : -1 );
deg = deg * ( s.y > o.y ? -1 : 1 )
return deg;
};
this.setStartEvent = function(ev){
startEvent = ev;
}
this.deg = function( e , update ){
var deg =getDeg({x:e.clientX,y:e.clientY});
$el.css("transform","rotate("+(boxRotate + deg)+"deg)");
update && (boxRotate += deg);
};
};
$(function(){
$('html,body').click(function(event) {
$('.selectNode').attr('controlThis',false);
return false;
});
$('.toolbar').click(function(event) {
return false;
});
//移动
$("img").prop("draggable",false)
var mama = function( $el , ev , callback ){
var $this =$el;
var eX1 = ev.clientX;
var eY1 = ev.clientY;
var sX1 = $this.css("left").replace("px","")*1;
var sY1 = $this.css("top").replace("px","")*1;
$(document).on('mousemove',function(ev) {
var dirX = ev.clientX - eX1;
var dirY = ev.clientY - eY1;
callback( sX1 + dirX , sY1 + dirY,dirX,dirY );
//callback(X轴新坐标，Y轴新坐标,X轴移动距离，Y轴移动距离)
return false;
});
$(document).on('mouseup',function(event) {
$(document).off('mousemove');
return false;
/* Act on the event */
});
callback( sX1, sY1 ,0,0 );
};
$('#canvas').on("mousedown",".rotatetip",function(e){
var $selected = $("#canvas .selected");
var r = $selected.data("r");
if( !r ){
r = new Rotate($selected.add($(".handles_border")));
$selected.data("r",r);
}
r.setStartEvent(e);
$(document).on("mouseup",function(e){
r.deg( e , true );
$(document).off("mouseup mousemove");
}).on("mousemove",function(e){
r.deg(e);
});
return false;
}).on('mousedown', '.selectNode,.handles_border', function(ev) {
var $this = $(this);
$this = $this.hasClass('handles_border') ? $("#canvas .selected") : $this;
$('#canvas .selected').removeClass('selected');
$this.addClass('selected');
//定位边框
$('.handles_border').removeClass('hidden invisible').css({
width : $this.width(),
height : $this.height(),
transform : $this.css('transform'),
display : 'block',
visibility : 'visible'
});
mama($this , ev , function( left , top, dirX, dirY){
$this.css({
left: left,
top: top,
});
$('.handles_border').css({
left: left,
top: top
});
});
event.preventDefault();
});
//定位框控制图标
//按Del键删除衣服
$(document).on("keyup" ,function(e){
var keycode = e.which;
if(keycode==46){
$( ".selected").remove();
}
});
//删除按钮
$('.toolbar').on('click', '#remove_btn', function(event) {
event.preventDefault();
$( ".selected").remove()
$('.handles_border').addClass('hidden invisible').css({
display: 'none',
visibility: 'hidden'
});
});
// 向上一层
$('#fgnd_btn').click(function(event) {
var num = $('.selectNode.selected').css('z-index');
num ++;
$('.selectNode.selected').css('z-index', num);
});
//垂直翻转
$('.toolbar').on('click', '#flip_btn', function(event) {
var str = $('.selectNode.selected').css('transform');
$('.selectNode.selected').css({
'transform': str + 'rotateZ(-180deg)'
});
});
//水平翻转
$('.toolbar').on('click', '#flop_btn', function(event) {
var str = $('.selectNode.selected').css('transform');
$('.selectNode.selected').css({
'transform': str + 'rotateY(-180deg)'
});
});
//向下一层
$('#bkgd_btn').click(function(event) {
var num = $('.selectNode.selected').css('z-index');
num --;
$('.selectNode.selected').css('z-index', num);
});
//复制
$('.toolbar').on('click', '#clone_btn', function(event) {
var $clone = $('.selectNode.selected').clone();
$clone.appendTo('#canvas').css({
left : parseFloat($clone.css('left')) + 10,
top : parseFloat($clone.css('top')) + 10
}).siblings('.selected').removeClass('selected');
});
//拉伸按钮
$('.handles_border').on('mousedown', '.sw,.nw,.ne,.se', function(ev) {
var $selected = $('#canvas .selected');
var $this = $(this);
var w = $selected.width();
var h = $selected.height();
var oldTop = parseFloat($selected.css("top"));
var oldLeft = parseFloat($selected.css("left"));
mama( $this , ev , function( left , top, dirX, dirY){
dirX = dirX * ( $this.hasClass('nw') || $this.hasClass('sw') ? -1 : 1 );
dirY = dirY * ( $this.hasClass('nw') || $this.hasClass('sw') ? -1 : 1 );
var newW = w + dirX;
var newH = h * (w + dirX ) / w;
if(newW < 30){
return;
}
var newTop = oldTop , newLeft = oldLeft;
if( $this.hasClass('nw') ){
newLeft = oldLeft - (newW-w);
newTop = oldTop - (newH -h);
}
if( $this.hasClass('sw') ){
newLeft = oldLeft - (newW-w);
}
if( $this.hasClass('ne') ){
newTop = oldTop - (newH -h);
}
$selected.add($('.handles_border')).css({
left : newLeft,
top : newTop,
width: newW,
height: newH
});
$selected.find("img").css({
width:$selected.width(),
height:$selected.height()
});
console.log( oldTop , oldLeft , newW , newH , w , h );
});
return false;
});
//旋转
$('.handles_border').on('click', '.rotatetip', function(ev) {
// var
event.preventDefault();
/* Act on the event */
});
});
</script>
</body></html>