рандомное размещение елемента
<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:31. |