3D Tag Cloud in jQuery anpassen

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- 3D Tag Cloud in jQuery anpassen »

XXwebdesignerXX

Mitglied

Dabei seit: 29.07.2009

Beiträge: 35

Dienstag, 20. September 2011, 20:42

Ich versuche schon die ganze zeit das Script zu ändern und zwar:

1. Drehgeschwindigkeit(Sehr Wichtig!)
2. Schriftgrösse(Sehr Wichtig!)
3. soll nicht drehen wenn man mit dem mauszeiger draufhält und nicht bewegt(auch wichtig aber erst nach 1. und 2.)
4. Wie geht es das das ding erdball/globus ähnlich in alle richtungen dreht(auch wichtig aber erst nach 1. und 2.)

Script:

Spoiler
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery 3D</title>
<style type="text/css" media="screen">
body{
font: 1em arial, verdana, sans-serif;
background: #111;
}
#list{
margin:0 auto;
height:500px;
width:500px;
overflow:hidden;
position:relative;
background-color: #000;
}
#list ul, #list li{
list-style:none;
margin:0;
padding:0;
}
#list a{
position:absolute;
text-decoration: none;
color:#666;
}
#list a:hover{
color:#ccc;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="list">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">&Uuml;ber mich</a></li>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Programmierung</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>

<script type="text/javascript">
$(document).ready(function(){

var element = $('#list a');;
var offset = 0;
var stepping = 0.03;
var list = $('#list');
var $list = $(list)

$list.mousemove(function(e){
var topOfList = $list.eq(0).offset().top
var listHeight = $list.height()
stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;

});


for (var i = element.length - 1; i >= 0; i--)
{
element[i].elemAngle = i * Math.PI * 2 / element.length;
}


setInterval(render, 20);


function render(){
for (var i = element.length - 1; i >= 0; i--){

var angle = element[i].elemAngle + offset;

x = 120 + Math.sin(angle) * 30;
y = 45 + Math.cos(angle) * 40;
size = Math.round(40 - Math.sin(angle) * 40);

var elementCenter = $(element[i]).width() / 2;

var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"

$(element[i]).css("fontSize", size + "pt");
$(element[i]).css("opacity",size/100);
$(element[i]).css("zIndex" ,size);
$(element[i]).css("left" ,leftValue);
$(element[i]).css("top", y + "%");
}

offset += stepping;
}


});
</script>
</body>
</html>

Von der Materie habe ich Null Ahnung, nie wirklich mit Javascript befasst..falls ihr jetzt sagt ja dann mach das da die Änderungen mehr Aufwand erfordern dann lasse ich es. Dachte vielleicht man muss nur die Werte ändern . Ich habe alle geändert aber da hat sich in Sachen Schriftgrösse, Drehgeschwindigkeit nichts getan!

Frage: Oder kann man die Sachen nur verändern wenn man Zugriff auf die im Header eingebundene Datei hat(<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

Spoiler

Jquery - 3D Wolke

Dieser Beitrag wurde bereits 12 mal editiert, zuletzt von »XXwebdesignerXX« (20. September 2011, 20:42)

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

Dienstag, 20. September 2011, 20:45

das du alle werte geändert hast kann wohl nicht sein, sonst hätte sich auch was geändert ;>

das meiste an dem script ist Mathe da musst kein JS für können nen bisschen HTML und CSS wissen wäre vermutlich ganz hilfreich

1. Drehgeschwindigkeit wird wenn ich das beim überfliegen richtig gesehen hab mit der Maus Bewegung auf der y-Achse geregelt und genauer mit dem stepping
2. Schriftgröße steht doch da css("fontSize",size + "pt") also mit size ;>
3. versteh ich nicht
4. das reine Mathematik vermutlich willst das mit x-Achen Maus Bewegung machen. das vernünftig umzusetzen ist aber sicher wenn man von dem Thema keine Ahnung hat nicht so einfach

-LA

XXwebdesignerXX

Mitglied

Dabei seit: 29.07.2009

Beiträge: 35

Dienstag, 20. September 2011, 20:48

Zitat von »lorenz«

das du alle werte geändert hast kann wohl nicht sein, sonst hätte sich auch was geändert ;>

das meiste an dem script ist Mathe da musst kein JS für können nen bisschen HTML und CSS wissen wäre vermutlich ganz hilfreich

1. Drehgeschwindigkeit wird wenn ich das beim überfliegen richtig gesehen hab mit der Maus Bewegung auf der y-Achse geregelt und genauer mit dem stepping
2. Schriftgröße steht doch da css("fontSize",size + "pt") also mit size ;>
3. versteh ich nicht
4. das reine Mathematik vermutlich willst das mit x-Achen Maus Bewegung machen. das vernünftig umzusetzen ist aber sicher wenn man von dem Thema keine Ahnung hat nicht so einfach

-LA

OMG, glaubst du/ihr ich hätte gefragt wenn es so einfach wäre. Das einzige was sich durch die Werteveränderungen getan hat: Der Kreis schiebt sich nach links und rechts, und bei schriftgrösse in css ändert sich gar nichts. Aber zum testen habt ihr ja eh kein Bock :thumbdown:

Ich frag mich manchmal echt was bei euch in den Köpfen abgeht, Studium auf dem Friedhof absolviert

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »XXwebdesignerXX« (20. September 2011, 20:48)

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

Dienstag, 20. September 2011, 21:02

vielleicht solltest du einfach mal nen par Grundkurse in der 9 klasse besuchen ich glaub sowas hat man da damals mal gelernt

es ist so einfach nur werde ich dir das sicher nicht umschreiben.

Du kannst gerne gezielte Fragen stellen aber wenn du dich nicht mal nen stück einarbeiten willst und anscheinend nicht mal die Rechnungen verstehst geschweige denn weißt wie man mit ner JS Console umgeht hat das vermutlich kein sinn.

- LA

PS. Wenn du noch mal vernünftige Fragen hast kannst du dich gerne melden aber auf solche Sachen werde ich in Zukunft nicht mehr Antworten.

3D Tag Cloud in jQuery anpassen

HTML

Zitat von »lorenz«

Ähnliche Themen