Показать сообщение отдельно
  #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>
Ответить с цитированием