jQuery3D动画文字滚动标签云,鼠标光标定位上下文字滚动-20130709

最新推荐文章于 2021-12-09 07:53:29 发布

xjwolaile

最新推荐文章于 2021-12-09 07:53:29 发布

阅读量514

点赞数

分类专栏：学习前端技术 jQuery 文章标签： mousemove element setInterval ViewUI

本文链接：https://blog.csdn.net/xjwolaile/article/details/84457139

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

jQuery

63 篇文章 0 订阅

订阅专栏

1、效果及功能说明
3D动画文字滚动特效带标签云上下文字滚动，鼠标光标定位时上下文字滚动感应

2、实现原理

首先将在div定义一个可以辨识鼠标位置的方法比且获得鼠标的位置然后定义方法通过辨别鼠标的位置让里面的文字或向上滚动或向下滚动，定义滚动的速度和滚动的平率速度慢滚动就慢平率慢画面就会给用户一种很卡的感觉，在控制文字的层级关系让显示在最前面的文字保持最高层级和文字在滚动中的尺寸大小最前面的最大最后面的最小，还可以通过移动鼠标让滚动效果停止

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/7425/4545d028-675b-3a04-b123-177f7f8edea3.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

(无图片)5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font-family:Arial, "MS Trebuchet", sans-serif;background-color:#111;}
#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;}
</style>

</head>
<body>

	<div id="list">
		<ul>
			<li><a href="http://www.17sucai.com/">PhP</a></li>
			<li><a href="http://www.17sucai.com/">jQuery</a></li>
			<li><a href="http://www.17sucai.com/">Magento</a></li>
			<li><a href="http://www.17sucai.com/">MySql</a></li>
			<li><a href="http://www.17sucai.com/">Js</a></li>
			<li><a href="http://www.17sucai.com/">HTML</a></li>
			<li><a href="http://www.17sucai.com/">CSS</a></li>
			<li><a href="http://www.17sucai.com/">Ajax</a></li>
			<li><a href="http://www.17sucai.com/">ThinkPHP</a></li>
			<li><a href="http://www.17sucai.com/">Apache</a></li>
			<li><a href="http://www.17sucai.com/">Linux</a></li>
			<li><a href="http://www.17sucai.com/">Python</a></li>
			<li><a href="http://www.17sucai.com/">web</a></li>
			<li><a href="http://www.17sucai.com/">xhtml</a></li>
		</ul>
	</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//定义一个可以激活所有函数的方法
	var element = $('#list a');
	//定义参数获得所有a标签
	var offset = 1; 
	//定义参数
	var stepping = 0.03;
	//定义参数控制文字滚动的速度数字越大，速度越快
	var list = $('#list');
	//定义参数 获得listID
	var $list = $(list)
	//定义获得参数
	$list.mousemove(function(e){
	//定义一个获得鼠标指针在页面中的位置方法
		var topOfList = $list.eq(0).offset().top
		//定义参数获得list通过遍历获得当前的偏移的高度
		var listHeight = $list.height()
		//定义参数获得list的宽度方法
		stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;
		//定义文字滚动的速度等于方法参数e调用y轴减去高度提取list的值除与list的宽度乘与0.2秒-0.1秒
	});

	for (var i = element.length - 1; i >= 0; i--){
	//判断 i 等于选择器选取带有指定标签名的元素的长度 - 1；i>0； i-1
		element[i].elemAngle = i * Math.PI * 2 / element.length;
		//等于选择器选取带有指定标签名的元素带有i参数调用旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转 
	}

	setInterval(render, 20);
	//周期（以毫秒计）来调用函数或计算表达式控制移动位置的平率数字越少移动平率越快数字越大移动平率越慢 要是慢的话看起来就会很卡 一动一动的 一点贯连感都没有 完全不自然 
	function render(){
	//定义方法
		for (var i = element.length - 1; i >= 0; i--){
		//判断 定义参数i等于选择器选取带有指定标签名的元素的长度 - 1；i>0； i-1
			var angle = element[i].elemAngle + offset;
			//定于参数 获得旋转量用弧度表示加上当前的偏移
			x = 120 + Math.sin(angle) * 30;
			//定义X轴 120px 加上 PHP Math方法调用函数返回一个数的正弦乘30
			y = 45 + Math.cos(angle) * 40;
			//定义Y轴 45px 加上 PHP Math方法调用函数返回一个数的余弦乘40
			//这两个就是判断鼠标在上或者在下从而改变旋转上下
			size = Math.round(40 - Math.sin(angle) * 40);
			//定义参数PHP Math方法是取近似值的数,也就是四舍五入的说法.返回一个整数值获得正弦值
			var elementCenter = $(element[i]).width() / 2;
			//定义参数 选择器选取带有指定标签名的元素获得宽度除与2
			var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"
			//定义参数 获得宽度方法除与2乘x除与100 - elementCenter参数 + 坐标单位px
			$(element[i]).css("fontSize", size + "pt");
			//控制样式大小单位pt
			$(element[i]).css("opacity",size/100);
			//控制样式透明度
			$(element[i]).css("zIndex" ,size);
			//控制样式层级关系
			$(element[i]).css("left" ,leftValue);
			//控制样式控制距左多少
			$(element[i]).css("top", y + "%");
			//控制样式高度多少
		}
		offset += stepping;
		//offset = offset + stepping
	}

});
</script>
</body>
</html>

xjwolaile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery3D动画文字滚动标签云,鼠标光标定位上下文字滚动-20130709

1、效果及功能说明 3D动画文字滚动特效带标签云上下文字滚动，鼠标光标定位时上下文字滚动感应 2、实现原理首先将在div定义一个可以辨识鼠标位置的方法比且获得鼠标的位置然后定义方法通过辨别鼠标的位置让里面的文字或向上滚动或向下滚动，定义滚动的速度和滚动的平率速度慢滚动就慢平率慢画面就会给用户一种很卡的感觉，在控制文字的层级关系让显示在最前面的文字保持最高层级和文字在滚动中的尺...
复制链接

扫一扫