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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

307 1225 409



特效描述:jquery 3D文字动画 上下滚动标签云。 jquery 3D文字动画上下滚动标签云效果

代码结构

1. 引入JS

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

2. HTML代码

	<div id="list">
		<ul>
			<li><a href="http://www.51qianduan.com//">PhP</a></li>
			<li><a href="http://www.51qianduan.com//">jQuery</a></li>
			<li><a href="http://www.51qianduan.com//">Magento</a></li>
			<li><a href="http://www.51qianduan.com//">MySql</a></li>
			<li><a href="http://www.51qianduan.com//">Js</a></li>
			<li><a href="http://www.51qianduan.com//">HTML</a></li>
			<li><a href="http://www.51qianduan.com//">CSS</a></li>
			<li><a href="http://www.51qianduan.com//">Ajax</a></li>
			<li><a href="http://www.51qianduan.com//">ThinkPHP</a></li>
			<li><a href="http://www.51qianduan.com//">Apache</a></li>
			<li><a href="http://www.51qianduan.com//">Linux</a></li>
			<li><a href="http://www.51qianduan.com//">Python</a></li>
			<li><a href="http://www.51qianduan.com//">web</a></li>
			<li><a href="http://www.51qianduan.com//">xhtml</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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到