관리 메뉴

심재운 블로그

랜덤 위치 jQuery 본문

프로그래밍/jQuery

랜덤 위치 jQuery

재우니 2017. 4. 12. 18:59


랜덤 위치 jQuery


https://codepen.io/kaypooma/pen/tAfwm?editors=1111


html


<div id="rand_pos" class="rand"></div>

<div id="pos_log" class="log">x: 0<br />y: 0</div>

<button class="new_pos">New position</button>


css


.rand {

  font-family: Helvetica, sans-serif;

  word-wrap: break;

  width: 100px;

  height: 100px;

  background: steelblue;

  padding: 10px;

  text-align: center;

  position: relative;

  z-index: -1;

}


.log {

  position: fixed;

  border: 1px solid #000;

  bottom: 0;

  right: 0;

  padding: 5px;

  width: 50px;

  height: 50px;

  font-family: Helvetica;

  font-size: 11px;

  background: skyblue;

  box-shadow: 0 0 20px #000;

}



.new_pos {

  background: #ccc;

  border: 1px solid #000;

  padding: 5px;

  box-shadow: 0 0 20px #555;

  -webkit-transition: all .2s ease-in;

  transition: all .2s ease-in;

}


.new_pos:hover {

  background: #bbb;

  box-shadow: 0 0 20px #222;

}



.new_pos:active {

  box-shadow: 0 0 20px #000;

  background: #aaa;

}



*:focus {

  outline: none;

}



body {

  overflow: hidden;

  height: 500px;

}


.new_pos {

  position: fixed;

  left: 0;

  bottom: 0;

  cursor: pointer;

}



js


$('.new_pos').click(function() {

  var bodyWidth = document.body.clientWidth

  var bodyHeight = document.body.clientHeight;

  var randPosX = Math.floor((Math.random()*bodyWidth));

  var randPosY = Math.floor((Math.random()*bodyHeight));

  var posLog = document.getElementById('pos_log');

  var posXY = 'x: ' + randPosX + '<br />' + 'y: ' + randPosY;

  

  $('#rand_pos').css('left', randPosX);

  $('#rand_pos').css('top', randPosY);

  

  posLog.innerHTML = posXY

});


0 Comments
댓글쓰기 폼