랜덤 위치 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
});