рандомное размещение елемента
<div class="wrapper"> <div id="ball"></div> </div>
#ball {
width: 100px;
height: 100px;
border-radius: 50%;
border: 8px solid black;
-webkit-box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.75);
background: black;
position: absolute;
top: 100px;
left: 100px;
}
$(function(){
var col1, col2, col3, topLeft;
col1 = Math.round(Math.random()*255); // рандомно вибираються кольори від 0 до 255
col2 = Math.round(Math.random()*255);
col3 = Math.round(Math.random()*255);
Top = Math.random()*($(window).height()-120);
Left = Math.random()*($(window).width()-120);
$("#ball").css({
background: 'rgb('+col1+',' +col2+','+col3+')',
border: '8px solid rgb('+col2+',' +col3+','+col1+')',
boxShadow: '0px 1px 30px 0px rgba('+col1+','+col2+','+col3+',0.75)',
left: Left+'px',
top: Top+'px'
}); // і фон border ball рендомно змінюється
});
Как сделать так что бы при открытии браузера автоматически запускалось рандомное размещение div#ball и параметры изменялись постоянно |
Anna_Medvid,
для этого есть раздел Общие вопросы Javascript
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#ball {
width: 100px;
height: 100px;
border-radius: 50%;
border: 8px solid black;
-webkit-box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.75);
background: black;
position: absolute;
top: 100px;
left: 100px;
transition: all 1s cubic-bezier(0,-0.96,.84,1.63);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
+function fn()
{
var col1, col2, col3, topLeft;
col1 = Math.round(Math.random()*255); // рандомно вибираються кольори від 0 до 255
col2 = Math.round(Math.random()*255);
col3 = Math.round(Math.random()*255);
Top = Math.random()*($(window).height()-120);
Left = Math.random()*($(window).width()-120);
$("#ball").css({
background: 'rgb('+col1+',' +col2+','+col3+')',
border: '8px solid rgb('+col2+',' +col3+','+col1+')',
boxShadow: '0px 1px 30px 0px rgba('+col1+','+col2+','+col3+',0.75)',
left: Left+'px',
top: Top+'px'
});
window.setTimeout(fn, 1500)
}()
});
</script>
</head>
<body>
<div class="wrapper">
<div id="ball"></div>
</div>
</body>
</html>
|
Спасибо огромное за помощь!
|
| Часовой пояс GMT +3, время: 17:27. |