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

xjwolaile

浏览: 342027 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

学习
前端技术
jQuery

mousemove element setInterval

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

2、实现原理

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

3、效果图

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>

分享到：

jQuery3D霓虹灯文字效果-20130710 | jQuery无缝滚动插件支持图片无缝滚动或文字 ...

2013-07-10 00:03
浏览 1949
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>