Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.02.2016, 05:44
Интересующийся
Отправить личное сообщение для Eadweard Посмотреть профиль Найти все сообщения от Eadweard
 
Регистрация: 16.02.2016
Сообщений: 19

При клике появлялся новый элемент (бесконечно)
Привет всем, я еще только изучаю javascript, поэтому мне еще трудно . Хотелось бы сделать круг, при клике на него, появлялся новый круг, при клике на другой круг и еще один (3 круг) появлялся и так до бесконечности. Я сделал рандомное перемещение и создание клонов, но тут незадача... При клике только на один круг, появляется новый, почему-то остальные появляются, но не двигаются также как и главный, хотя должен быть идентичным.
В идеале должно: при клике на каждый круг он создает еще круг и появляются они в разном месте, при этом передвигались. Попробуем?

<html>
<head> 
<title>Перемещение круга</title>
<style>
.svgcircle
{
position: absolute;
}
#circle
{
transition: 1s cubic-bezier(0, 0, 1, 1);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
window.onclick = function() 
{
var circle = event.target;
circle.setAttribute("cx",Math.random()*500)
circle.setAttribute("cy",Math.random()*500)
$(".main").clone().appendTo(".container");
}
</script>
<div class="container">
<div class="main">
<svg width ="600" height ="600" class="svgcircle">
<circle id="circle" cx="35" cy="25" r="20" fill="black"/></circle>
</svg>
</div>
</div>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 16.02.2016, 07:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

Eadweard,
для попробовать атрибут run
[HTML run][/HTML]
Ответить с цитированием
  #3 (permalink)  
Старый 16.02.2016, 07:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

Сообщение от Eadweard
остальные появляются, но не двигаются
потому что id уникально!!!
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8">
<title>Перемещение круга</title>
<style>
.svgcircle
{
position: absolute;
}
.circle
{
-webkit-transition: all 10s cubic-bezier(0, 0, 1, 1);
-moz-transition:all 10s cubic-bezier(0, 0, 1, 1);
-o-transition:all 10s cubic-bezier(0, 0, 1, 1);
transition:all 10s cubic-bezier(0, 0, 1, 1);
}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<script>
$("html").on("click", ".circle" , function()
{
this.setAttribute("cx",Math.random()*500)
this.setAttribute("cy",Math.random()*500)
$(this).clone().appendTo(".svgcircle");
})
</script>
<div class="container">
<div class="main">
<svg width ="600" height ="600" class="svgcircle">
<circle class="circle" cx="35" cy="25" r="20" fill="black"/></circle>
</svg>
</div>
</div>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 16.02.2016, 08:13
Интересующийся
Отправить личное сообщение для Eadweard Посмотреть профиль Найти все сообщения от Eadweard
 
Регистрация: 16.02.2016
Сообщений: 19

Благодарю, всё так, как и хотел. Продолжу своё изучение javascript.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
При клике на элемент показать другой (эквивалентная связка) nimensy jQuery 4 22.12.2014 10:02
Выплывающая картинка при клике на кнопку karssen jQuery 9 19.10.2014 18:27
.remove для родителя возникает и при клике на потомка. Как отключить? arachnoz jQuery 3 05.07.2013 17:43
При клике на ссылку ничего не происходит gurg0n Элементы интерфейса 2 24.06.2013 11:11