10.03.2016, 07:49
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
 рони,
Если все вылизать - ТС нечего делать будет, а так - простор для творчества
Последний раз редактировалось Dilettante_Pro, 10.03.2016 в 10:16.
|
|
10.03.2016, 11:19
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Топикстартер молчит, поэтому - спецвариант, чтобы глаза рони не утомлять
<!DOCTYPE HTML>
<html>
<head>
<title>Перемещение круга</title>
<style type="text/css" >
.svgcircle
{
position: absolute;
}
.circle, .rect, .ellipse
{ -webkit-transition:all 3s cubic-bezier(0, 0, 1, 1);
-moz-transition:all 3s cubic-bezier(0, 0, 1, 1);
-o-transition:all 3s cubic-bezier(0, 0, 1, 1);
transition:all 3s cubic-bezier(0, 0, 1, 1);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function setNewAttr(elem) {
$(elem).attr({
cx: Math.random() * 500,
cy: Math.random() * 500,
x: Math.random() * 500,
y: Math.random() * 500,
fill: randomRGBColor()
});
}
function randomRGBComponent() {
return Math.round(Math.random() * 255);
}
function randomRGBColor() {
return 'rgb(' + randomRGBComponent() + ', ' + randomRGBComponent() + ', ' + randomRGBComponent() + ')';
}
$("html").on("click", ".circle", function () {
setNewAttr(this);
var r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
$(r).attr({
class: "rect",
x: Math.random() * 500,
y: Math.random() * 500,
width: "35",
height: "35",
fill: randomRGBColor()
});
$('svg').append(r);
});
$("html").on("click", ".rect", function () {
setNewAttr(this);
var r = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
$(r).attr({
class: "ellipse",
cx: Math.random() * 500,
cy: Math.random() * 500,
rx: "50",
ry: "25",
fill: randomRGBColor()
});
$('svg').append(r);
});
$("html").on("click", ".ellipse", function () {
setNewAttr(this);
var r = document.createElementNS("http://www.w3.org/2000/svg", "circle");
$(r).attr({
class: "circle",
cx: Math.random() * 500,
cy: Math.random() * 500,
r: "35",
fill: randomRGBColor()
});
$('svg').append(r);
});
</script>
</head>
<body>
<svg version="1.1" baseProfile="full" width ="600" height ="600" class="svgcircle">
<circle class="circle" cx="300" cy="300" r="35" fill="red"/>
</svg>
</body>
</html>
Последний раз редактировалось Dilettante_Pro, 10.03.2016 в 15:36.
|
|
10.03.2016, 11:47
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,074
|
|
|
Dilettante_Pro,
маловато будет строки 40, 41, 42, 45, повторяются значит их тоже можно вынести в отдельную функцию createAndsetNewAttr(options, elem) , нет элемента создаём, есть options ставим из options иначе по умолчанию
|
|
10.03.2016, 11:55
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
рони,
Новые атрибуты устанавливаются на существующий кликнутый элемент для transition. Новый элемент другого типа по клику создается всегда.
В строках 41, 40 - x и у, в других - cx cy.
Можно, конечно, в функцию createAndsetNewAttr поместить наборы опций для всех типов создаваемых элементов - но мне что-то не хочется.. да и времени особо нет
Последний раз редактировалось Dilettante_Pro, 10.03.2016 в 12:04.
|
|
10.03.2016, 12:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,074
|
|
Dilettante_Pro,
ок
|
|
10.03.2016, 15:55
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Эксклюзивно для рони, чисто из любви к искусству
<!DOCTYPE HTML>
<html>
<head>
<title>Перемещение круга</title>
<style type="text/css" >
.svgcircle
{
position: absolute;
}
.circle, .rect, .ellipse
{ -webkit-transition:all 3s cubic-bezier(0, 0, 1, 1);
-moz-transition:all 3s cubic-bezier(0, 0, 1, 1);
-o-transition:all 3s cubic-bezier(0, 0, 1, 1);
transition:all 3s cubic-bezier(0, 0, 1, 1);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function createAndsetNewAttr(elem,elemNew) {
$(elem).attr({
cx: Math.random() * 500,
cy: Math.random() * 500,
x: Math.random() * 500,
y: Math.random() * 500,
fill: randomRGBColor()
});
var r = document.createElementNS("http://www.w3.org/2000/svg", elemNew);
$(r).attr({
class: elemNew,
x: Math.random() * 500,
y: Math.random() * 500,
cx: Math.random() * 500,
cy: Math.random() * 500,
fill: randomRGBColor()
});
switch (elemNew) {
case "rect":
$(r).attr({
width: "35",
height: "35"
});
break;
case "ellipse":
$(r).attr({
rx: "50",
ry: "25"
});
break;
case "circle":
$(r).attr({
r: "35"
});
}
$('svg').append(r);
}
function randomRGBComponent() {
return Math.round(Math.random() * 255);
}
function randomRGBColor() {
return 'rgb(' + randomRGBComponent() + ', ' + randomRGBComponent() + ', ' + randomRGBComponent() + ')';
}
$("html").on("click", ".circle", function () {
createAndsetNewAttr(this, "rect");
});
$("html").on("click", ".rect", function () {
createAndsetNewAttr(this, "ellipse");
});
$("html").on("click", ".ellipse", function () {
createAndsetNewAttr(this, "circle");
});
</script>
</head>
<body>
<svg version="1.1" baseProfile="full" width ="600" height ="600" class="svgcircle">
<circle class="circle" cx="300" cy="300" r="35" fill="red"/>
</svg>
</body>
</html>
Только не говорите, что Math.random() * 500 можно заменить функцией
Последний раз редактировалось Dilettante_Pro, 10.03.2016 в 16:01.
|
|
10.03.2016, 16:05
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,074
|
|
|
Сообщение от Dilettante_Pro
|
|
Только не говорите, что Math.random() * 500 можно заменить функцией
|
да и эта функция в строке 60, немного только подправить |
|
11.03.2016, 04:53
|
|
Интересующийся
|
|
Регистрация: 16.02.2016
Сообщений: 19
|
|
Всем спасибо. Взял лучший вариант |
|
|
|
