最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jquery 3D动画文字滚动标签云鼠标光标定位上下文字滚动

来源:http://www.erdangjiade.com/js/1138.html 二当家的 2017-02-13 21:30浏览(803)

jquery 3D动画文字滚动标签云,鼠标光标定位上下文字滚动效果实现源码下载

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jquery 3D动画文字滚动标签云鼠标光标定位上下文字滚动
分类:文字特效 > 标签云 难易:
查看演示 下载资源: 16

关注微信号获取此Demo视频教程:

下载资源 下载积分: 10 积分
$(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;
	}
	
});
<div id="list">
		<ul>
			<li><a href="http://www.erdangjiade.com/">PhP</a></li>
			<li><a href="http://www.erdangjiade.com/">jQuery</a></li>
			<li><a href="http://www.erdangjiade.com/">Magento</a></li>
			<li><a href="http://www.erdangjiade.com/">MySql</a></li>
			<li><a href="http://www.erdangjiade.com/">Js</a></li>
			<li><a href="http://www.erdangjiade.com/">HTML</a></li>
			<li><a href="http://www.erdangjiade.com/">CSS</a></li>
			<li><a href="http://www.erdangjiade.com/">Ajax</a></li>
			<li><a href="http://www.erdangjiade.com/">ThinkPHP</a></li>
			<li><a href="http://www.erdangjiade.com/">Apache</a></li>
			<li><a href="http://www.erdangjiade.com/">Linux</a></li>
			<li><a href="http://www.erdangjiade.com/">Python</a></li>
			<li><a href="http://www.erdangjiade.com/">web</a></li>
			<li><a href="http://www.erdangjiade.com/">xhtml</a></li>
		</ul>
	</div>
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/1138.html
评论0
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

1 2