ich suche ein anpassbares script für so eine wolke:
am liebsten das: http://www.lrworld.com/de/
habe auch noch andere varianten gefunden aber so soll es nicht sein
http://www.roytanck.com/tag-cloud
http://niklasknaack.blogspot.de/2009/11/3d-tag-cloud.html
mein bisheriger code:
JavaScript
<!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="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</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>
Alles anzeigen
Bei meiner Variante ist nur leider nicht so wie in den beiden Links oben, sprich es dreht sich zu schnell und die Textgrösse ist zu groß.
hat wer erfahrung mit diesen dingern.
ich kann zwar etwas html aber jquery ist mir fremd