`
海上明月共潮生--风铃
  • 浏览: 60160 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

js 网页 实现 黑客帝国中的字符下落效果 立体动态文字旋转效果

阅读更多



 11,黑客帝国中的文字下落效果

感觉很专业哦 

代码:

<HTML>
<HEAD>
	 
	<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
</HEAD>
<style type="text/css">
body
{
	overflow:hidden;
	margin:0;
	background-color:#000000;
	font-family:宋体;
}
DIV.#heike
{
	overflow:hidden;
	position:relative;
	top:5%;
	width:90%;
	height:90%;
	border-style:solid;
	border-width:1;
	border-color:#009900;
}
</style>
<script language="javascript">
var strCount;
var str;
var Color;
var Font;
var sLine = "W<br>W<br>W<br>.<br>B<br>a<br>i<br>D<br>u<br>.<br>C<br>O<br>M";
function OnLoad()
{
	strCount = 40;
	str = [];
	Color = [];
	Font = [];
	Color[0] = "#002211";//文字的颜色
	Color[1] = "#003311";
	Color[2] = "#005511";
	Color[3] = "#008811";
	Color[4] = "#00BB99";
	Color[5] = "#114411";
	Color[6] = "#335566";
	Color[7] = "#668899";
	Color[8] = "#99BBAA";
	Color[9] = "#CECECC";
	Font[0] = "10px";    //文字的大小
	Font[1] = "12px";
	Font[2] = "14px";
	Font[3] = "16px";
	Font[4] = "18px";
	setTimeout("strik()",50);
}
function strik()
{
	for(var i=0;i<strCount;i++)
	{
		if(typeof(str[i]) != "undefined")   //如果字符串存在
		{
			if(str[i]["Carch"].style.pixelTop > heike.clientHeight)
			{
				str[i]["Carch"].outerHTML = "";
				delete str[i]["Level"];//删除数组元素
				delete str[i]["Speed"];
				delete str[i]["Carch"];
				delete str[i];
			}
			else
			{
				str[i]["Carch"].style.pixelTop += str[i]["Speed"];
			}
		}
		else if(Math.random()<0.25)             //随机小数
		{
			str[i] = new Array();
			str[i]["Level"] = Math.round(Math.random()*4);
			str[i]["Speed"] = (Math.round(Math.random()*str[i]["Level"])<<2)+10;
			document.all["heike"].insertAdjacentHTML("AfterBegin","<span id='SPAN_"+i+"'>"+sLine+"</span>");
			str[i]["Carch"] = document.all["SPAN_"+i];
			str[i]["Carch"].style.fontSize = Font[str[i]["Level"]];             //字体
			str[i]["Carch"].style.position = "absolute";                        //位置
			str[i]["Carch"].style.pixelLeft = Math.round(Math.random()*heike.clientWidth);  //x坐标
			str[i]["Carch"].style.pixelTop = -str[i]["Carch"].offsetHeight;                 //y坐标
			str[i]["Carch"].style.color = Color[str[i]["Level"]+5];                         //颜色
			str[i]["Carch"].style.filter = "glow(Color="+Color[str[i]["Level"]]+",Strength=5)";//滤镜效果
			str[i]["Carch"].style.zIndex = str[i]["Level"];                                    //z-Index
		}
	}
	setTimeout("strik()",50);
}
</script>
<BODY onload="OnLoad()">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" height="100%"><div id="heike"></div></td></tr>
<tr><td align="center" style="padding:5;font-size:9pt;color:#FFFFFF;">使用 IE 6.0 以上版本或以 IE 为核心的浏览器浏览本页,1024*768分辨率为佳</td></tr>
</table>
</BODY>
</HTML>

 12,动态立体旋转文字效果


 


 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<SCRIPT language=javascript>
myWord="欢迎来看北京奥运会"                                             //要旋转的文字
tmpStr=""               //连接字符串
Taille=40;
wordLength=myWord.length;           //获取文本的长度
for (x=0;x<wordLength;x++)
{
                //动态添加层,设置层的ID,和每个层上显示的文本
  tmpStr=tmpStr + '<DIV Id=L' + x + ' STYLE="width:3;font-family: Courier New;font-weight:bold;position:absolute;top:40;left:50;z-index:0">' + myWord.charAt(x) + '</DIV>'
}
document.write (tmpStr);            //输出动态div层,显示旋转文本
Time=window.setInterval("txtRound()",10);       //使用定时器,实现文本的不断旋转
Alpha=5;
I_Alpha=0.05;
function txtRound()
{
	Alpha=Alpha-I_Alpha;                            //类似步长的功能
	for (x=0;x<wordLength;x++){
		Alpha1=Alpha+0.5*x;
		Cosine=Math.cos(Alpha1);
		Ob=document.all("L"+x);                         //获取指定的层
		Ob.style.posLeft=100+100*Math.sin(Alpha1)+50;  //设置div的x坐标
		Ob.style.zIndex=20*Cosine;                      //设置层的层叠顺序
		Ob.style.fontSize=Taille+25*Cosine;             //设置层的字体
		Ob.style.color="rgb("+ (27+Cosine*80+50) + ","+ (127+Cosine*80+50) + ",0)";     //实现颜色的变化
	}
}
</SCRIPT>
</head>
<body>
</body>
</html>
  • 大小: 59 KB
  • 大小: 8.7 KB
分享到:
评论

相关推荐

    javascript实现的黑客帝国中的字符下落特效

    javascript实现的黑客帝国中的字符下落特效,很炫

    javascript黑客帝国超酷文字下落

    javascript 黑客帝国 超酷 文字下落 javascript 黑客帝国 超酷 文字下落 javascript 黑客帝国 超酷 文字下落 javascript 黑客帝国 超酷 文字下落 javascript 黑客帝国 超酷 文字下落 javascript 黑客帝国 超酷 文字...

    黑客帝国中01下落效果 javascript

    黑客帝国中0,1下落的效果实现 javascript

    黑客帝国 超酷文字下落

    在C++中实现“黑客帝国”式的超酷文字下落特效,主要涉及以下几个知识点: 1. **字符数组与字符串**:首先,我们需要一个包含大量字符的数组或字符串来模拟下落的文字。在C++中,可以使用`char`类型的数组或`std::...

    JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果.docx

    JS+CSS+HTML实现“代码雨”...本文主要介绍了使用JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果的技术,涵盖了HTML结构、JavaScript动画实现、CSS样式设计、矩阵代码实现和代码雨效果实现等多个方面的知识点。

    JS实现黑客帝国文字下落效果

    在JavaScript(JS)中实现黑客帝国文字下落效果是一种经典的网页动态效果,它模拟了电影《黑客帝国》开头的字符瀑布场景。这个效果通常通过创建多个动态文本元素并以随机速度下落来实现。让我们详细了解一下如何使用...

    黑客帝国的 字符雨 屏幕动画c++实现

    《黑客帝国》中的字符雨屏幕动画是电影中极具标志性的视觉元素之一,它以其独特的艺术风格和科技感深受人们喜爱。在本项目中,我们将学习如何使用C++编程语言来实现这一经典效果。C++是一种强大的、通用的编程语言,...

    js实现黑客帝国文字矩阵

    通过javascript以及html5实现黑客帝国电影中的文字矩阵特效。

    安卓动画效果相关-android上仿黑客帝国字符雨.rar

    标题中的“安卓动画效果相关-android上仿黑客帝国字符雨.rar”指的是一个Android应用程序,它实现了类似于电影《黑客帝国》中的经典字符雨效果。在《黑客帝国》中,屏幕上的字符快速下落,营造出一种高科技的视觉...

    js黑客帝国代码雨特效,炫酷动态效果,前端小白必看!

    js黑客帝国代码雨特效,炫酷动态效果,前端小白必看! js黑客帝国代码雨特效,炫酷动态效果,前端小白必看! js黑客帝国代码雨特效,炫酷动态效果,前端小白必看! js黑客帝国代码雨特效,炫酷动态效果,前端小白必...

    android上仿黑客帝国字符雨

    在Android平台上实现“黑客帝国”风格的字符雨效果,是一种极具视觉冲击力的动画设计,它通常涉及到TextView组件、自定义动画以及定时器等技术。接下来,我们将详细探讨如何利用这些技术来创建这样的效果。 首先,`...

    黑客帝国字符、字符雨

    在编程世界中,黑客帝国的字符雨特效是一个非常经典的视觉效果,它源自于电影《黑客帝国》中著名的“子弹时间”场景。这个特效通过快速下落的字符流,营造出一种高科技、未来感的氛围。在本项目中,我们将探讨如何...

    黑客帝国html前端炫酷效果黑客帝国

    黑客帝国html前端炫酷效果黑客帝国

    黑客帝国电脑效果

    此外,JavaScript库如jQuery或Three.js也可以用来创建更复杂的3D效果和动画,进一步模仿电影中的视觉特效。 此外,考虑到"黑客帝国"的标签,我们还可以推测这个项目可能涉及到矩阵代码的设计。在电影中,这些代码以...

    html5 canvas黑客帝国文字瀑布流效果

    在这个“HTML5 Canvas黑客帝国文字瀑布流效果”中,我们将深入探讨如何利用Canvas API实现类似电影《黑客帝国》中经典的绿色字符瀑布效果。 首先,我们需要了解Canvas的基本用法。HTML5的`&lt;canvas&gt;`元素提供了一个...

    canvas+ ts + js 实现黑客帝国代码雨效果

    最后,为了让效果更加逼真,我们还可以添加一些额外的细节,例如随机的字符间距、速度差异,甚至让某些字符在下落过程中旋转,模拟屏幕上的错位感。 总的来说,实现“黑客帝国”代码雨效果是一个结合了HTML5 Canvas...

    js-文字雨-黑客帝国效果

    "js-文字雨-黑客帝国效果"是一个使用JavaScript实现的特效,模仿了电影《黑客帝国》中经典的“绿色代码雨”场景。这个效果通过动态地在页面上显示滚动的文字,营造出一种科技感强烈的视觉体验。 要创建这种文字雨...

    黑客帝国.rar

    JavaScript是一种广泛使用的脚本语言,主要应用于Web开发,它可以实现网页的动态交互效果。JavaScript的核心特性包括变量、数据类型、函数、对象和原型等。通过学习和掌握JavaScript,开发者可以创建复杂的网页应用...

    html JS仿黑客帝国字母掉落效果

    在本主题中,我们将深入探讨如何使用 HTML 和 JavaScript 来实现一个“黑客帝国”式的字母掉落效果,这是一种非常经典的视觉特效,能为网页增添科技感和动感。 首先,HTML(HyperText Markup Language)是网页的...

Global site tag (gtag.js) - Google Analytics