3D动画文字滚动标签云效果

使用方法：

核心css样式

#list{margin:0 auto;height:600px;width:600px;overflow:hidden;position:relative;background-color:#000;}
#list a{position:absolute;text-decoration:none;color:#666;}
#list a:hover{color:#ccc;}

引入jQuery库文件

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

JS结构

$(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;
	}
	
});

HTML结构

<div id="list">
    <ul>
        <li><a href="#">PhP</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Magento</a></li>
        <li><a href="#">MySql</a></li>
        <li><a href="#">Js</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Ajax</a></li>
        <li><a href="#">ThinkPHP</a></li>
        <li><a href="#">Apache</a></li>
        <li><a href="#">Linux</a></li>
        <li><a href="#">Python</a></li>
        <li><a href="#">web</a></li>
        <li><a href="#">xhtml</a></li>
    </ul>
</div>