부분보기] 재능 결여자를 위한 그림 연습 5..

1)
5월 중순쯤에 몰락인생님의 "그림연습"에 관한 이미지파일이 보여서,
.. 이렇게하면 어떨까..라는 생각에 살짝 수정해봤습니다.

*이미지 출처* 잡담 < 몰락인생 : 네이버 블로그
http://blog.naver.com/gaogao66/100187828863

..

2)

<input type=button value="<" onclick=buttonClick130513_1(39); />
<input type=button value="^" onclick=buttonClick130513_1(40); />
<input type=button value="v" onclick=buttonClick130513_1(38); />
<input type=button value=">" onclick=buttonClick130513_1(37); />
<div style=width:96px;height:90px;overflow:hidden;position:relative; >
  <div id=mp130513_1 style=position:absolute;left:0px;top:-85px;overflow:hidden;width:740px;height:454px; >
    <img src=http://cfs.tistory.com/custom/blog/42/429787/skin/images/130513_1head.jpg onclick="alert(this.offsetParent.style.left+' '+this.offsetParent.style.top);" />
  </div>
</div>
<script>

var
  buttonClick130513_1;

(function(){

// http://blog.naver.com/gaogao66/100187828863
//<img src=http://blogfiles.naver.net/20130513_264/gaogao66_1368442853321p7p8a_JPEG/head.jpg />
function $(v) {
  return document.getElementById(v);
  }

function dd(t, a) {
  var i, al=a.length, ov=[];

  for (i=0; i<al; i++) {
    ov[i]=t; t+=a[i];
    }
  ov[i]=t;

  return ov;
  }

var
  me=$('mp130513_1')
  , xp=me.offsetLeft, yp=me.offsetTop
  , xl=18, yt=0
  , xi=dd(xl, [ 77, 67, 60, 55, 57, 56, 61, 56, 60, 67])
  , yi=dd(yt, [ 86, 88, 88, 90])
  ;


// document.body.onkeydown=function(evt) {
//  var e=evt||event, k=e.keyCode;
buttonClick130513_1=function(k) {

  if (!(xp+0>=0)) xp=0;
  if (!(yp+0>=0)) yp=0;

  switch(k) {
    case 37 : xp++; break;
    case 39 : xp--; break;
    case 38 : yp++; break;
    case 40 : yp--; break;
    }

  if (xp<0) xp+=xi.length; xp%=xi.length;
  if (yp<0) yp+=yi.length; yp%=yi.length;

  me.style.left=-xi[xp]+'px';
  me.style.top=-yi[yp]+'px';

//  alert(k);
  }

})();

</script>

-- 새 창에 샘플 보여주기.. --

 

..

3)

..

4)
좌상하우 버튼(?)을 이용해서,
각각(?) 이미지에 잘 보이(?)는 위치를 보여줍니다.

..

5-1)
.. 확대..라든지, .. 그런 기능을 적용시켜볼 생각은 못해봤구요..
(비트맵이라 깨져보일거라는 생각도 있긴 하지만..)

좌우반전을 이용해서 반대편 형태를 보여주는 건 어떨까..는
조명위치가 문제될 것 같아서 생략(?)했습니다.

크기별로 표시크기를 조정해볼까..라는 생각도 들긴 했습니다만, (가운데표시는 접어두고라두요..)
.. 고개숙인(?) 부분에서 자르는 위치를 고르기가 애매하더라구요.

5-2)
눈치(?)챈 분은 눈치채셨겠지만,
맨 처음에는 키보드 상하좌우를 이용해서 작동(?)하도록 설계했는데요,

모바일에서 상하좌우키가 없다는 생각에,
<input type=button 을 이용해 조정했습니다.
( = =;.. 정작, 모바일에서는 이미지가 보이지 않지만요.. - 조정했습니다. )

..

wantHate killofki@.

ps.. 문제가 될 부분이 있다면 꼭 지적해주세요.
처리방법 확인이 되면 가능한한 빨리 처리하겠습니다. (특히 저작권 & 이미지사용 부분..)

http://pba.kr