Created
January 18, 2017 06:20
-
-
Save dstyle0210/216b2c32e86e208162de272b431c8027 to your computer and use it in GitHub Desktop.
마우스 드래그 좌표저장
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> | |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Document</title> | |
| <script src="/com/js/lib/jquery-1.11.3.min.js"></script> | |
| </head> | |
| <body style="padding:0;margin:0;"> | |
| <div id="canvas" style="position:relative;background:url('http://10.10.66.127/images/event/inc/event20170201001/@imgEvent1.jpg');width:985px;height:930px;"> | |
| <div id="mover"><span></span></div> | |
| </div> | |
| <div style="position:fixed;right:0;top:0;"> | |
| <button onclick="start(0);">0단계</button> | |
| <button onclick="start(1);">1단계</button> | |
| <button onclick="start(2);">2단계</button> | |
| <button onclick="start(3);">3단계</button> | |
| <button onclick="start(4);">4단계</button> | |
| <button onclick="start(5);">5단계</button> | |
| <button onclick="start(6);">6단계</button> | |
| <button onclick="start(7);">7단계</button> | |
| <button onclick="start(8);">8단계</button> | |
| <button onclick="start(9);">9단계</button> | |
| <button onclick="start(10);">10단계</button> | |
| </div> | |
| <div style="position:fixed;right:0;top:30px;">단계당 시간 : <select name="" id="timeselect"> | |
| <option value="500" selected>0.5초</option> | |
| <option value="400">0.4초</option> | |
| <option value="300">0.3초</option> | |
| <option value="200">0.2초</option> | |
| <option value="100">0.1초</option> | |
| </select></div> | |
| <textarea name="" id="test" cols="30" rows="10" style="position:fixed;right:0;top:60px;"></textarea> | |
| <style> | |
| #mover{width:62px;height:90px;position:absolute;top:0;left:0;} | |
| #mover>span{position:relative;display:block;width:62px;height:90px;background:url('http://10.10.66.127/images/event/inc/event20170201001/pointer.png') no-repeat;animation-name: step10;animation-duration: 1s;animation-iteration-count: infinite;} | |
| @keyframes step10 { | |
| 0%{top:-5px;} | |
| 50%{top:5px;} | |
| 100%{top:-5px;} | |
| } | |
| </style> | |
| <script> | |
| var step = [ | |
| [{"x":747,"y":11}], | |
| [{"x":744,"y":12},{"x":741,"y":13},{"x":737,"y":13},{"x":733,"y":13},{"x":727,"y":13},{"x":723,"y":13},{"x":720,"y":14},{"x":716,"y":14},{"x":712,"y":14},{"x":708,"y":14},{"x":704,"y":14},{"x":700,"y":14},{"x":696,"y":14},{"x":693,"y":15},{"x":689,"y":15},{"x":685,"y":15},{"x":681,"y":15},{"x":677,"y":15},{"x":673,"y":15},{"x":669,"y":15},{"x":665,"y":15},{"x":661,"y":15},{"x":657,"y":15},{"x":653,"y":15},{"x":649,"y":15},{"x":645,"y":15},{"x":641,"y":15},{"x":637,"y":15},{"x":633,"y":15},{"x":629,"y":15},{"x":626,"y":16},{"x":622,"y":16},{"x":618,"y":16},{"x":614,"y":16},{"x":610,"y":16},{"x":607,"y":17},{"x":603,"y":17},{"x":599,"y":17}], | |
| [{"x":599,"y":21},{"x":598,"y":21},{"x":594,"y":21},{"x":590,"y":21},{"x":586,"y":21},{"x":582,"y":21},{"x":578,"y":22},{"x":574,"y":22},{"x":570,"y":22},{"x":566,"y":22},{"x":562,"y":22},{"x":530,"y":23},{"x":525,"y":23},{"x":521,"y":23},{"x":517,"y":23},{"x":513,"y":23},{"x":509,"y":23},{"x":505,"y":23},{"x":501,"y":23},{"x":497,"y":23},{"x":490,"y":23},{"x":486,"y":23},{"x":482,"y":23},{"x":478,"y":23},{"x":474,"y":23},{"x":470,"y":23},{"x":466,"y":23},{"x":462,"y":23},{"x":458,"y":23},{"x":456,"y":23},{"x":452,"y":23},{"x":449,"y":22},{"x":445,"y":22},{"x":441,"y":22},{"x":437,"y":22},{"x":434,"y":21},{"x":430,"y":21},{"x":426,"y":21},{"x":423,"y":20}], | |
| [{"x":421,"y":22},{"x":421,"y":22},{"x":418,"y":22},{"x":414,"y":22},{"x":410,"y":22},{"x":406,"y":22},{"x":402,"y":22},{"x":397,"y":22},{"x":393,"y":22},{"x":388,"y":22},{"x":383,"y":22},{"x":378,"y":22},{"x":374,"y":22},{"x":370,"y":22},{"x":366,"y":22},{"x":362,"y":22},{"x":358,"y":22},{"x":354,"y":22},{"x":350,"y":22},{"x":346,"y":22},{"x":342,"y":22},{"x":338,"y":22},{"x":334,"y":22},{"x":330,"y":22},{"x":326,"y":22},{"x":322,"y":22},{"x":318,"y":22},{"x":314,"y":22},{"x":300,"y":21},{"x":296,"y":21},{"x":292,"y":21},{"x":288,"y":21},{"x":285,"y":20},{"x":281,"y":20},{"x":277,"y":20},{"x":273,"y":20},{"x":269,"y":20},{"x":266,"y":19},{"x":262,"y":19},{"x":260,"y":19},{"x":256,"y":19},{"x":252,"y":19}], | |
| [{"x":249,"y":22},{"x":249,"y":22},{"x":248,"y":24},{"x":246,"y":26},{"x":243,"y":27},{"x":242,"y":30},{"x":239,"y":31},{"x":237,"y":33},{"x":235,"y":35},{"x":233,"y":37},{"x":230,"y":38},{"x":228,"y":40},{"x":226,"y":42},{"x":224,"y":44},{"x":221,"y":47},{"x":219,"y":49},{"x":217,"y":51},{"x":215,"y":53},{"x":213,"y":55},{"x":211,"y":57},{"x":209,"y":60},{"x":207,"y":62},{"x":206,"y":65},{"x":203,"y":68},{"x":201,"y":70},{"x":199,"y":72},{"x":197,"y":74},{"x":196,"y":77},{"x":195,"y":80},{"x":194,"y":83},{"x":193,"y":86},{"x":191,"y":88},{"x":190,"y":91},{"x":189,"y":94},{"x":188,"y":97},{"x":187,"y":100},{"x":185,"y":102},{"x":185,"y":106},{"x":183,"y":108},{"x":183,"y":112},{"x":182,"y":115},{"x":182,"y":119},{"x":182,"y":123},{"x":182,"y":127},{"x":182,"y":131},{"x":182,"y":135},{"x":182,"y":139},{"x":182,"y":143},{"x":182,"y":147},{"x":183,"y":150},{"x":184,"y":153}], | |
| [{"x":188,"y":152},{"x":186,"y":154},{"x":185,"y":157},{"x":184,"y":160},{"x":184,"y":164},{"x":184,"y":166},{"x":184,"y":170},{"x":185,"y":174},{"x":186,"y":177},{"x":187,"y":181},{"x":188,"y":184},{"x":190,"y":186},{"x":192,"y":189},{"x":193,"y":192},{"x":195,"y":194},{"x":197,"y":196},{"x":199,"y":199},{"x":202,"y":202},{"x":203,"y":205},{"x":205,"y":207},{"x":207,"y":209},{"x":210,"y":211},{"x":212,"y":213},{"x":214,"y":215},{"x":216,"y":217},{"x":219,"y":219},{"x":221,"y":221},{"x":224,"y":223},{"x":225,"y":226},{"x":228,"y":227},{"x":230,"y":229},{"x":233,"y":231},{"x":235,"y":233},{"x":238,"y":234},{"x":241,"y":235},{"x":243,"y":237},{"x":245,"y":239},{"x":248,"y":240},{"x":250,"y":242},{"x":252,"y":244},{"x":255,"y":245},{"x":257,"y":247},{"x":260,"y":248},{"x":262,"y":250},{"x":265,"y":251},{"x":267,"y":253},{"x":269,"y":255},{"x":273,"y":256},{"x":275,"y":258},{"x":277,"y":260},{"x":281,"y":262},{"x":284,"y":263},{"x":286,"y":265},{"x":289,"y":266},{"x":292,"y":268},{"x":295,"y":269},{"x":298,"y":270},{"x":300,"y":272},{"x":303,"y":273},{"x":306,"y":274},{"x":309,"y":275},{"x":312,"y":276},{"x":314,"y":278},{"x":317,"y":279},{"x":320,"y":280},{"x":323,"y":281},{"x":327,"y":281},{"x":330,"y":282},{"x":334,"y":282}], | |
| [{"x":340,"y":288},{"x":340,"y":288},{"x":344,"y":288},{"x":348,"y":288},{"x":352,"y":288},{"x":356,"y":288},{"x":360,"y":288},{"x":364,"y":288},{"x":368,"y":288},{"x":372,"y":288},{"x":376,"y":288},{"x":380,"y":288},{"x":384,"y":288},{"x":388,"y":288},{"x":392,"y":288},{"x":396,"y":288},{"x":400,"y":288},{"x":404,"y":288},{"x":408,"y":288},{"x":412,"y":288},{"x":416,"y":288},{"x":420,"y":288},{"x":424,"y":288},{"x":428,"y":288},{"x":432,"y":288},{"x":436,"y":288},{"x":440,"y":288},{"x":444,"y":288},{"x":448,"y":288},{"x":452,"y":288},{"x":456,"y":288},{"x":460,"y":288},{"x":464,"y":288},{"x":468,"y":288},{"x":472,"y":288},{"x":476,"y":288},{"x":480,"y":288},{"x":484,"y":288},{"x":488,"y":288},{"x":492,"y":288},{"x":496,"y":288},{"x":500,"y":288},{"x":504,"y":288},{"x":508,"y":288},{"x":512,"y":288},{"x":515,"y":287}], | |
| [{"x":520,"y":287},{"x":520,"y":287},{"x":522,"y":287},{"x":526,"y":287},{"x":530,"y":287},{"x":534,"y":287},{"x":538,"y":287},{"x":542,"y":287},{"x":545,"y":288},{"x":549,"y":289},{"x":553,"y":289},{"x":559,"y":290},{"x":564,"y":290},{"x":568,"y":290},{"x":572,"y":291},{"x":576,"y":291},{"x":580,"y":291},{"x":583,"y":292},{"x":587,"y":292},{"x":590,"y":293},{"x":594,"y":293},{"x":598,"y":293},{"x":602,"y":293},{"x":605,"y":294},{"x":609,"y":294},{"x":613,"y":294},{"x":616,"y":295},{"x":620,"y":295},{"x":623,"y":296},{"x":627,"y":296},{"x":631,"y":296},{"x":635,"y":296},{"x":638,"y":297},{"x":642,"y":297},{"x":646,"y":297},{"x":649,"y":298},{"x":652,"y":299},{"x":655,"y":300},{"x":658,"y":301},{"x":662,"y":301},{"x":664,"y":303},{"x":668,"y":303},{"x":671,"y":304},{"x":674,"y":305},{"x":676,"y":307},{"x":679,"y":308},{"x":682,"y":309},{"x":685,"y":310},{"x":688,"y":312},{"x":691,"y":313},{"x":694,"y":314},{"x":697,"y":315},{"x":700,"y":316}], | |
| [{"x":704,"y":316},{"x":704,"y":316},{"x":705,"y":316},{"x":705,"y":320},{"x":707,"y":322},{"x":708,"y":325},{"x":710,"y":327},{"x":711,"y":330},{"x":712,"y":333},{"x":713,"y":336},{"x":714,"y":339},{"x":715,"y":342},{"x":717,"y":345},{"x":719,"y":347},{"x":720,"y":350},{"x":722,"y":353},{"x":723,"y":356},{"x":725,"y":358},{"x":726,"y":361},{"x":728,"y":363},{"x":729,"y":366},{"x":730,"y":369},{"x":732,"y":372},{"x":733,"y":375},{"x":735,"y":377},{"x":736,"y":381},{"x":737,"y":384},{"x":737,"y":388},{"x":738,"y":391},{"x":739,"y":394},{"x":740,"y":397},{"x":740,"y":401},{"x":740,"y":405},{"x":740,"y":409},{"x":740,"y":413},{"x":740,"y":417},{"x":740,"y":421},{"x":740,"y":425},{"x":740,"y":429},{"x":740,"y":433},{"x":740,"y":437},{"x":740,"y":441},{"x":740,"y":445},{"x":740,"y":449},{"x":740,"y":453},{"x":740,"y":457},{"x":740,"y":461}], | |
| [{"x":741,"y":464},{"x":741,"y":464},{"x":739,"y":465},{"x":737,"y":468},{"x":735,"y":471},{"x":733,"y":474},{"x":731,"y":476},{"x":729,"y":479},{"x":727,"y":481},{"x":725,"y":483},{"x":723,"y":485},{"x":720,"y":486},{"x":719,"y":489},{"x":716,"y":490},{"x":714,"y":492},{"x":712,"y":494},{"x":711,"y":495},{"x":708,"y":497},{"x":705,"y":499},{"x":702,"y":500},{"x":700,"y":502},{"x":697,"y":503},{"x":694,"y":504},{"x":692,"y":506},{"x":689,"y":507},{"x":686,"y":508},{"x":683,"y":509},{"x":681,"y":511},{"x":677,"y":512},{"x":674,"y":513},{"x":671,"y":514},{"x":668,"y":515},{"x":666,"y":517},{"x":662,"y":517},{"x":659,"y":518},{"x":656,"y":520},{"x":652,"y":520},{"x":649,"y":521},{"x":646,"y":522},{"x":643,"y":523},{"x":639,"y":523},{"x":636,"y":524},{"x":632,"y":524},{"x":628,"y":525},{"x":625,"y":526},{"x":622,"y":527},{"x":618,"y":527},{"x":615,"y":528},{"x":612,"y":529},{"x":609,"y":530},{"x":606,"y":531},{"x":603,"y":532},{"x":599,"y":532},{"x":597,"y":534},{"x":593,"y":534},{"x":590,"y":535},{"x":587,"y":536},{"x":583,"y":537},{"x":580,"y":538},{"x":576,"y":538},{"x":573,"y":539},{"x":569,"y":540},{"x":566,"y":541},{"x":563,"y":542},{"x":559,"y":542},{"x":557,"y":544},{"x":553,"y":544},{"x":549,"y":545},{"x":546,"y":546},{"x":542,"y":546},{"x":539,"y":547},{"x":536,"y":548},{"x":533,"y":549},{"x":529,"y":549},{"x":526,"y":550},{"x":523,"y":551},{"x":519,"y":551},{"x":516,"y":552},{"x":512,"y":552},{"x":508,"y":552},{"x":504,"y":552}], | |
| [{"x":505,"y":557},{"x":505,"y":557},{"x":502,"y":557},{"x":498,"y":557},{"x":494,"y":557},{"x":490,"y":557},{"x":486,"y":557},{"x":482,"y":557},{"x":478,"y":557},{"x":474,"y":557},{"x":470,"y":557},{"x":466,"y":557},{"x":462,"y":557},{"x":458,"y":557},{"x":454,"y":557},{"x":450,"y":557},{"x":446,"y":557},{"x":442,"y":557},{"x":438,"y":557},{"x":434,"y":557},{"x":430,"y":557},{"x":426,"y":557},{"x":424,"y":557},{"x":420,"y":557},{"x":416,"y":557},{"x":412,"y":557},{"x":408,"y":557},{"x":404,"y":557},{"x":400,"y":557},{"x":396,"y":557},{"x":392,"y":557},{"x":388,"y":557},{"x":384,"y":557},{"x":380,"y":557},{"x":376,"y":557},{"x":372,"y":557},{"x":368,"y":557},{"x":364,"y":557},{"x":360,"y":557},{"x":356,"y":557},{"x":352,"y":557},{"x":348,"y":557},{"x":344,"y":557},{"x":340,"y":557},{"x":336,"y":557},{"x":332,"y":557},{"x":328,"y":557},{"x":324,"y":557}] | |
| ]; | |
| $(function(){ | |
| var $canvas = $("#canvas"); | |
| var move = false; | |
| var fps = 3; | |
| var count = 0; | |
| $canvas.on("mousedown",function(e){ | |
| pos = []; | |
| move = true; | |
| pos.push({x:Math.ceil(e.offsetX - 31),y:Math.ceil(e.offsetY - 90)}); | |
| }); | |
| // 마우스다운(drag==true) 마우스 움직이는 상태. | |
| $canvas.on("mousemove",function(e){ | |
| if(move){ | |
| count++; | |
| if(fps<count){ | |
| pos.push({x:Math.ceil(e.offsetX - 31),y:Math.ceil(e.offsetY - 90)}); | |
| count = 0; | |
| } | |
| }; | |
| }); | |
| // 마우스업 => 드래그 종료. | |
| $canvas.on("mouseup",function(e){ | |
| move = false; | |
| $("#test").text( JSON.stringify(pos) ); | |
| }); | |
| }); | |
| var mover = $("#mover"); | |
| var pos = []; | |
| var time = 30; | |
| function start(flag){ | |
| pos = []; | |
| flag = flag; | |
| for(i=0;i<=flag;i++){ | |
| pos = pos.concat(step[i]); | |
| }; | |
| console.log(pos); | |
| var cut = $("#timeselect").val(); | |
| time = (flag!=0) ? (flag*cut)/pos.length : 30; | |
| move(0); | |
| }; | |
| function move(idx){ | |
| setTimeout(function(){ | |
| if(idx<pos.length){ | |
| mover.css({top:pos[idx].y, left:pos[idx].x}); | |
| move(idx+1); | |
| }; | |
| console.log(idx); | |
| }, time ); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment