Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.01.2017, 01:21
Интересующийся
Отправить личное сообщение для Anna_Medvid Посмотреть профиль Найти все сообщения от Anna_Medvid
 
Регистрация: 07.01.2017
Сообщений: 10

рандомное размещение елемента
<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 и параметры изменялись постоянно
Ответить с цитированием
  #2 (permalink)  
Старый 09.01.2017, 01:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 18,566

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>
Ответить с цитированием
  #3 (permalink)  
Старый 09.01.2017, 15:10
Интересующийся
Отправить личное сообщение для Anna_Medvid Посмотреть профиль Найти все сообщения от Anna_Medvid
 
Регистрация: 07.01.2017
Сообщений: 10

Спасибо огромное за помощь!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскаите как менять класс у елемента в зависимость от класса другово елемента NirVanea Общие вопросы Javascript 4 10.09.2015 13:51
node.js рандомное число web_programmist AJAX и COMET 3 07.01.2013 02:44
понимать css своиство елемнта (если етого елемента нет прямо заданно атрибут style) dadli Общие вопросы Javascript 3 27.05.2012 23:53
Вставка елемента после другого AndreyT Общие вопросы Javascript 7 24.12.2009 10:59
свойства елемента semi Javascript под браузер 1 05.12.2009 16:06