`

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

阅读更多
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>
分享到:
评论

相关推荐

    jQuery上下间歇文字滚动.zip

    《jQuery上下间歇文字滚动详解》 在网页设计中,动态效果往往能吸引用户的注意力,增强用户体验。"jQuery上下间歇文字滚动"就是这样一款优秀的JavaScript特效,它为单排文字提供了一个圆滑、流畅的上下滚动展示方式...

    简单易用的图片文字滚动插件--jQuery Scrollbox.rar

    简单易用的图片文字滚动插件--jQuery Scrollbox.rar简单易用的图片文字滚动插件--jQuery Scrollbox.rar简单易用的图片文字滚动插件--jQuery Scrollbox.rar简单易用的图片文字滚动插件--jQuery Scrollbox.rar简单易用...

    jquery 文字向上滚动

    【标签】"jQuery 文字滚动"标签表明这个技术是基于jQuery库的,jQuery是一个广泛使用的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互。它的API设计使得创建复杂的页面动态效果变得简单,而文字滚动...

    jquery文字上下滚动

    "jquery文字上下滚动"是jQuery应用的一个常见功能,常用于网站新闻更新、滚动公告或者滚动字幕等场景,为用户提供动态且吸引人的视觉效果。 要实现jQuery文字上下滚动的效果,首先需要在页面中引入jQuery库。这通常...

    jQuery文字滚动鼠标点击停止特效.zip

    在这个特效中,我们可能需要使用到`marquee`标签或者自定义CSS动画来实现文字滚动。 接下来,我们将焦点转向“鼠标点击停止特效”。这个功能通常通过监听鼠标点击事件(`click`事件)来实现。当用户点击时,...

    jquery 文字水平无缝滚动鼠标滑过文字悬停

    在网页设计中,动态效果常常能提升用户体验,其中“jQuery 文字水平无缝滚动鼠标滑过文字悬停”是一种常见的交互式文本展示技术。这个技术利用jQuery库的强大功能,结合CSS和JavaScript实现文字在水平方向上平滑滚动...

    一个jquery广告文字上下滚动效果

    标题中的“一个jQuery广告文字上下滚动效果”是指利用JavaScript库jQuery实现的一种动态展示文本的特效,常见于网站的广告栏或者新闻滚动条。这种效果可以让文字以上下滚动的方式吸引用户的注意力,增加信息的可见性...

    jQuery-实现文字无缝滚动效果.zip

    在这个“jQuery-实现文字无缝滚动效果.zip”压缩包中,包含了一个利用jQuery实现的文字滚动效果的代码示例。接下来,我们将详细讨论这个知识点。 一、jQuery基础知识 1. 选择器:jQuery提供了丰富的选择器,如ID...

    jquery文字上下无缝滚动

    **jQuery文字上下无缝滚动** 在网页设计中,为了吸引用户的注意力或者展示大量信息,我们经常需要使用滚动效果。"jQuery文字上下无缝滚动"是一种常见的网页动态效果,它可以使文字或内容在页面上持续滚动,给予用户...

    jQuery单行文字上下不间断循环滚动效果,适合做新闻滚动推荐

    标题和描述提到的"jQuery单行文字上下不间断循环滚动效果"就是一个这样的实例,它主要用于创建一串文字在单一行内循环滚动,通常用于网站的头部或侧边栏,以动态展示最新的新闻标题或公告。 要实现这个效果,首先...

    jQuery和css3简单的文字3d翻转和3d旋转动画特效

    本项目聚焦于使用jQuery和CSS3创建的文字3D翻转与旋转动画特效,提供了五种不同的动画模式,为网页增添引人入胜的用户体验。 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理、...

    jquery单行文字循环滚动.rar

    标题中的“jquery单行文字循环滚动”指的是使用jQuery库实现的一种常见的前端文本动画效果,它能使一行文字在页面上连续不断地循环滚动,常用于显示新闻标题、滚动公告等。jQuery是一个广泛使用的JavaScript库,它...

    jquery图片文字滚动插件

    图片文字滚动插件通常利用CSS定位和jQuery的动画功能,通过改变元素的位置或透明度,模拟出从一端向另一端滚动的效果。它可以根据需求设置滚动速度、方向、循环次数等参数,实现多样化的效果。 三、核心功能解析 1....

    jQuery文字滚动显示

    总结来说,jQuery文字滚动显示是通过选择器定位元素,结合动画方法来实现的。理解jQuery的基本用法和动画原理,可以轻松创建各种动态效果,提升网页的用户体验。在实际项目中,根据需求和场景灵活运用,将使页面更加...

    jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css

    这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定版本,即1.8.16。这个版本在当时是一个广泛使用的稳定版本,提供了丰富的功能和组件。 ...

    jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622

    【jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622】这个项目是基于JavaScript库jQuery实现的一种效果,它模拟了新浪微博中图片和文字列表的滚动展示方式,通常用于新闻资讯或者社交媒体的动态展示...

    jQuery页面上下滚动触发区块动画特效

    **jQuery页面上下滚动触发区块动画特效** 在网页设计中,用户交互体验是非常关键的一环,而动态效果可以显著提升用户体验。"jQuery页面上下滚动触发区块动画特效"是一种常见且吸引人的设计手法,它使得网页在用户...

    jquery插件jquery-ui-1.8.2.custom.min.js

    《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...

    jquery仿wp动画悬浮标签云插件.zip

    《jQuery仿WP动画悬浮标签云插件解析与应用》 在网页设计中,标签云(Tag Cloud)是一种常见的展示信息的方式,它通过不同大小的字体或颜色来表示各个标签的重要性和频率,使得用户可以直观地浏览和探索内容。...

    Jquery 球面滚动 云标签

    总之,"Jquery 球面滚动 云标签"插件提供了一种创新的标签展示方式,通过jQuery的便利性和强大的动画功能,使得网页的标签云更具吸引力和动态感。在实际应用中,你可以结合自己的设计需求,灵活调整和扩展这个插件,...

Global site tag (gtag.js) - Google Analytics