Показать сообщение отдельно
  #8 (permalink)  
Старый 01.09.2024, 08:57
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,134

Я сделал это все кофе животворящий по утрам!!!
Естественно не доделанно но хоть направление надо же научить плохому =)

Ползунки проще двигать с клавиатуры и нет проверок на недопустимые значения
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style> 
div#place {	position:relative;width: 500px;height:500px;border: 4px solid black;background: rgb(169 197 169);}
div#doker { position: absolute;top:50%;left:50%;border: 2px solid rgb(255,0,0);perspective:800px;}
ul#diagramm{margin: 0;padding: 0;transform-style: preserve-3d;}
ul#diagramm > li{ display: block;border: 1px solid rgba(0,0,50,1);height: 50px;width: 50px;position: absolute;
    background: linear-gradient(345deg,  rgb(161 30 1) 0%, rgb(209 142 19) 35%, rgb(210 230 255) 100%);}
</style><script>
"use strict";
function KungFU (p){
const j = {};
j.k1 = 16;j.k2 = 12;j.k3 = 3;j.k4 = 8;j.k5 = -20;j.k6 = -20;j.k7 = 48;j.k8 = 0;j.k9 = 0;
	j.start =(elementID)=> {
		j.mainElementHTML = document.getElementById(elementID);
		j.ElementNullXYZ = j.mainElementHTML.firstElementChild;
		j.ElementScene = j.ElementNullXYZ.firstElementChild;
		j.arr = j.ElementScene.children;
		j.ElementSetPosition();
		return j;
	}
	j.Rotate = () => {
		j.ElementScene.style.transform = "rotateX("+j.k8+"deg) rotateY("+j.k9+"deg)";
	}
	j.SetParam = (e) => {
	}
	j.ElementSetPosition = ()=> {
		let radiusSpiral = j.mainElementHTML.clientHeight / j.k1; let segmentCircle = j.k2;let addStep = radiusSpiral / segmentCircle ;
		let step = radiusSpiral * j.k3;let x,y,z;
		let f = Math.PI * 2 / segmentCircle; let d = f*j.k4;
			for ( let i=0 ; i < j.k7 ; i++ ){
				d += f;
				x = step * Math.cos(d) + j.k5;
				y = step * Math.sin(d) + j.k6;
				step += addStep;
				j.arr[i].style = 'transform: translate3d('+x+'px, '+y+'px, '+(i)+'px) rotateX(-0deg) rotateY(-0deg) rotateZ('+(i%segmentCircle)/segmentCircle * 360+'deg);';
			}
	}
	window.j = j;
	return j.start(p);
} 
document.addEventListener("DOMContentLoaded", ()=> KungFU("place") );
</script></head><body>
<div id="place"><div id="doker"><ul id="diagramm">
<li>1<img src="https://javascript.ru/forum/image.php?u=12207&dateline=1432960730"/></li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li>
<li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
</ul></div></div>
<p >
<input type="range" min="-100" max="100" value="16" onchange="j?j.ElementSetPosition(j.k1=value):0"/>
<input type="range" min="-100" max="100" value="12" onchange="j?j.ElementSetPosition(j.k2=value):0"/>
<input type="range" min="-100" max="100" value="3" onchange="j?j.ElementSetPosition(j.k3=value):0"/>
<input type="range" min="-100" max="100" value="8" onchange="j?j.ElementSetPosition(j.k4=value):0"/>
<input type="range" min="-100" max="100" value="-20" onchange="j?j.ElementSetPosition(j.k5=value):0"/>
<input type="range" min="-100" max="100" value="-20" onchange="j?j.ElementSetPosition(j.k6=value):0"/>
<input type="range" min="-100" max="100" value="48" onchange="j?j.ElementSetPosition(j.k7=value):0"/>
<input type="range" min="-360" max="360" value="48" onchange="j?j.Rotate(j.k8=value):0"/>
<input type="range" min="-360" max="360" value="48" onchange="j?j.Rotate(j.k9=value):0"/>
</p>
</body></html>

Последний раз редактировалось MallSerg, 01.09.2024 в 09:14.
Ответить с цитированием