<style type="text/css"> #tagcloud{ background:#FFF; border:1px solid #000; font:14px Verdana,sans-serif; height:400px; overflow:hidden; position:relative; width:400px; } #tagcloud ul,#tagcloud li{ list-style:none; margin:0; padding:0; } #tagcloud a{ /* background:#FFF; border:1px solid #FFF; */ color:#000; left:50%; line-height:1.2em; margin:-0.6em 0 0 0; padding:0 0.2em; position:absolute; text-align:center; text-decoration:none; top:50%; } #tagcloud a:hover{ background:#FFF; border:1px solid #00F; z-index:1000 !important; } </style> <div id="tagcloud" onmousemove="stepping = (event.clientY - container.offsetTop) / container.offsetHeight * 0.2 - 0.1;"> <ul> <li><a href="#">ajax</a></li> <li><a href="#">bьcher</a></li> <li><a href="#">barcamp</a></li> <li><a href="#">barrierefrei</a></li> <li><a href="#">css</a></li> <li><a href="#">design</a></li> <li><a href="#">firefox</a></li> <li><a href="#">flash</a></li> <li><a href="#">html</a></li> <li><a href="#">ie</a></li> <li><a href="#">interview</a></li> <li><a href="#">jquery</a></li> <li><a href="#">PHP</a></li> <li><a href="#">SEO</a></li> <li><a href="#">usability</a></li> <li><a href="#">w3c</a></li> <li><a href="#">webdesign</a></li> <li><a href="#">webmontag</a></li> <li><a href="#">webstandards</a></li> <li><a href="#">xhtml</a></li> </ul> </div> <script type="text/javascript"> var a = 0, b = 0, e; var offA = 0, stepping = 0.01; var container = document.getElementById("tagcloud"); window.onload = function() { e = container.getElementsByTagName("A"); for (var i = e.length - 1; i >= 0; i--) { e[i].tcAngle = i * Math.PI * 2 / e.length; } setInterval(function() { for (var i = e.length - 1; i >= 0; i--) { var angle = e[i].tcAngle + offA; x = 50 + Math.sin(angle) * 20; y = 50 + Math.cos(angle) * 40; tcSize = Math.round(20 - Math.sin(angle) * 10); // y = (y - 50) * (200 - x * 2) * 0.01 + 50; e[i].style.fontSize = tcSize + "px"; e[i].style.zIndex = tcSize; e[i].style.left = (container.offsetWidth * x / 100 - e[i].offsetWidth / 2) + "px"; e[i].style.top = y + "%"; } offA += stepping; }, 17); } </script>