矩阵数字雨 jQuery特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是矩阵数字雨 jQuery特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="google" value="notranslate"/>
<title>矩阵数字雨jQuery特效</title>
<link href="css/general.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/settings.js"></script>
<script type="text/javascript" src="js/general.js"></script>
</head>
<body onresize="resize()">
<div id="dv" onmousedown="yh()">
</div>
<div id="wb" style="display:none;margin: 0;
	padding: 0;
	top:2.5%;
	width:50%;
    	left:25%;
	/*background color*/
	background-color:black;
    opacity:0.85;
	position:absolute;">
<h1 style="color:#43EF18;text-align:center;">HTML Development</h1><br/>
<pre style="color:#43EF18;margin-left:5%;margin-right:5%;font-size:15px; white-space: pre-wrap;
   white-space: -moz-pre-wrap;
   white-space: -pre-wrap;  
   white-space: -o-pre-wrap;  
   word-wrap: break-word;
   margin-bottom:1px;
   ">
In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in the later 1990. That year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes from 1990 he listed "some of the many areas in which hypertext is used" and put an encyclopedia first.
The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Berners-Lee in late 1991. It describes 18 elements comprising the initial, relatively simple design of HTML. Except for the hyperlink tag, these were strongly influenced by SGMLguid, an in-house SGML-based documentation format at CERN. Eleven of these elements still exist in HTML 4.
HyperText Markup Language is a markup language that web browsers use to interpret and compose text, images and other material into visual or audible web pages. Default characteristics for every item of HTML markup are defined in the browser, and these characteristics can be altered or enhanced by the web page designer's additional use of CSS. Many of the text elements are found in the 1988 ISO technical report TR 9537 Techniques for using SGML, which in turn covers the features of early text formatting languages such as that used by the RUNOFF command developed in the early 1960s for the CTSS (Compatible Time-Sharing System) operating system: these formatting commands were derived from the commands used by typesetters to manually format documents. However, the SGML concept of generalized markup is based on elements (nested annotated ranges with attributes) rather than merely print effects, with also the separation of structure and markup; HTML has been progressively moved in this direction with CSS.
Berners-Lee considered HTML to be an application of SGML. It was formally defined as such by the Internet Engineering Task Force (IETF) with the mid-1993 publication of the first proposal for an HTML specification: "Hypertext Markup Language (HTML)" Internet-Draft by Berners-Lee and Dan Connolly, which included an SGML Document Type Definition to define the grammar. The draft expired after six months, but was notable for its acknowledgment of the NCSA Mosaic browser's custom tag for embedding in-line images, reflecting the IETF's philosophy of basing standards on successful prototypes. Similarly, Dave Raggett's competing Internet-Draft, "HTML+ (Hypertext Markup Format)", from late 1993, suggested standardizing already-implemented features like tables and fill-out forms.
After the HTML and HTML+ drafts expired in early 1994, the IETF created an HTML Working Group, which in 1995 completed "HTML 2.0", the first HTML specification intended to be treated as a standard against which future implementations should be based.
Further development under the auspices of the IETF was stalled by competing interests. Since 1996, the HTML specifications have been maintained, with input from commercial software vendors, by the World Wide Web Consortium (W3C). However, in 2000, HTML also became an international standard (ISO/IEC 15445:2000). HTML 4.01 was published in late 1999, with further errata published through 2001. In 2004 development began on HTML5 in the Web Hypertext Application Technology Working Group (WHATWG), which became a joint deliverable with the W3C in 2008.
</pre>
</div>
<aside id="st">
<form>
<label style="margin-left:10px">Blur<small style="font-size:12px;">(only safari and chrome)</small>: </label><input type="checkbox" onclick="os()" id="icb"/><br/><input type="number" style="margin-left:10px;margin-right:10px;" id="bt" onchange="os()" rows="1" value="1.72"></input><hr/>
<label style="margin-left:10px">Mode: </label><br/>
<select  style="margin-left:10px" id = "ics" onchange="os()">
<option value = "binary">Binary</option>
<option value = "hex-upper case">Hex upper case</option>
<option value = "hex-lower case">Hex lower case</option>
<option value = "eng-upper case">English upper case</option>
<option value = "eng-lower case">English lower case</option>
<option value = "decimal">Decimal</option>
<option value = "chinese">Chinese</option>
<option value = "mix">Mix</option>
<option value = "random">Random</option>
</select><hr/>
<label style="margin-left:10px">Speed<small>(milliseconds)</small>: </label><br/><input type="number" style="margin-left:10px;margin-right:10px;" id="spt" onchange="os()" rows="1" value="3000"></input><hr/>
<label style="margin-left:10px">Amount of characters: </label><br/><input type="number" style="margin-left:10px;margin-right:10px;" id="aoct" onchange="oso()" rows="1" value="50"></input><hr/>
<label style="margin-left:10px">Background color: </label><br/><input type="color" style="margin-left:10px;margin-right:10px;" id="bct" onchange="os()" value="Black"></input><br/>
<label style="margin-left:10px">Text color: </label><br/><input type="color" style="margin-left:10px;margin-right:10px;" id="tct" onchange="os()" value="#43EF18"></input><br/><hr/>
<label style="margin-left:10px">Font size: </label><br/><input type="number" style="margin-left:10px;margin-right:10px;" id="mfss" onchange="os()" rows="1" value="1.1"></input><br/>
<label style="margin-left:10px">Font: </label><br/><br/><input type="text" style="margin-left:10px;margin-right:10px;" id="ft" onchange="os()" rows="1" value="Arial"></input><hr/>
<label style="margin-left:10px">As website background: </label><input type="checkbox" onclick="os()" id="awb"/>
<hr/>
<small  style="margin-left:1px;font-size:12px;">Click background to hide/show the box.</small>
</form>
</aside>
</body>
</html>

JS代码(general.js):

$(document).ready(function(e){
	jl();
	start();
	setInterval(function(){
	jk()}
,100);
}
);
	function jk(){
	os();
}
function yh(){
	$("#st").toggle(250);
}
function resize(){
	jl();
	$("g").remove();
	start();
}
function start(){
	if(ts=="random"){
	_rand();
}
for(i=0;
	i<b;
	i++){
	$("#dv").html($("#dv").html()+"<g></g>");
}
for(i=0;
	i<b;
	i++){
	a=$( $("g")[i] ).css("top",String(innerHeight)+"px");
}
gg=setInterval(function(){
	u()}
,100);
}
function u(){
	var hp=0;
	var dc=0;
	for(i=0;
	i<b;
	i++){
	a=$( $("g")[i] );
	if(parseFloat(a.css("top"))>=(innerHeight)&&Math.floor(Date.now()*(Math.random()*10))%4==0){
	s(a);
}
if(parseFloat(a.css("font-size"))>hp&&(parseFloat(a.css("top"))>=0&&parseFloat(a.css("top"))<innerHeight)){
	dc=i;
	hp=parseFloat(a.css("font-size"));
}
}
if(hb){
	rb=$( $("g")[dc] );
	rb.css("filter","blur(0px)");
	rb.css("-webkit-filter","blur(0px)");
	rb.css("font-size",String(parseFloat(a.css("font-size"))*1.5));
}
}
function s(k){
	d=sp+(Date.now()*(Math.random()*10))%innerWidth;
	k.css("top",String((((Date.now()*(Math.random()*10))%200)*-1)-200)+"px");
	k.css("left",String(((Math.floor(Date.now()/Math.random()*10))%(innerWidth+500))-500)+"px");
	if(ts=="binary")a.html(_bin());
	elseif (ts=="hex-upper case")k.html(_hex("c"))elseif(ts=="hex-lower case")k.html(_hex("lc"));
	elseif(ts=="eng-lower case")a.html(_eng("lc"));
	elseif(ts=="eng-upper case")a.html(_eng("c"));
	elseif(ts=="decimal")a.html(_decimal());
	elseif(ts=="mix")a.html(_mix());
	elseif(ts=="chinese")a.html(_chinese());
	op=innerHeight+(Date.now()*Date.now())%innerWidth;
	tt=(op-parseFloat(k.css("top"))*2);
	k.css("font-size"," "+String((tt/5)*mfs)+"%");
	if(hb){
	hj=parseFloat(k.css("font-size"))/40;
	oi=hh-(hj-hh);
	k.css("-webkit-filter","blur("+String(oi)+"px)");
	k.css("filter","blur("+String(oi)+"px)");
	k.css("Z-index",String(Math.floor(oi)));
}
else{
	k.css("-webkit-filter","");
	k.css("filter","");
	k.css("text-shadow","");
}
k.animate({
	top:String(op)+"px"}
,{
	duration:d,easing:"linear",queue:false}
);
}
var tg;
	function jl(){
	if(innerHeight>innerWidth&&!tg){
	b/=1.5;
	tg=true;
}
else{
	if(tg)b*=1.5;
	tg=false;
}
}
function _bin(){
	return String(Math.floor(Date.now()*(Math.random()*10))%2);
}
function _hex(rg){
	var gh;
	var uy=Math.floor(Date.now()*(Math.random()*10))%16+1;
	if(uy<11){
	gh=String(uy);
}
if(rg=="c")switch (uy){
	case 11:gh="A";
	break;
	case 12:gh="B";
	break;
	case 13:gh="C";
	break;
	case 14:gh="D";
	break;
	case 15:gh="E";
	break;
	case 16:gh="F";
	break;
}
elseif(rg=="lc")switch (uy){
	case 11:gh="a";
	break;
	case 12:gh="b";
	break;
	case 13:gh="c";
	break;
	case 14:gh="d";
	break;
	case 15:gh="e";
	break;
	case 16:gh="f";
	break;
}
return gh;
}
function _eng(ok){
	if(ok=="c")tb=Math.floor(Date.now()*(Math.random()*10))%25+65;
	elseif(ok=="lc")tb=Math.floor(Date.now()*(Math.random()*10))%25+97;
	return "&#"+String(tb)+";
	"}
function _mix(){
	var un;
	if(Date.now()%50==2)un=_chinese();
	elseun=String.fromCharCode(Date.now()%870);
	return un;
}
function _decimal(){
	var un=String.fromCharCode(Math.floor(Date.now()*(Math.random()*10))%870);
	return Date.now()%10;
}
function _chinese(){
	var fr,to;
	switch(Date.now()%4){
	case 0:fr=0x4E00;
	to=0x62FF;
	break;
	case 1:fr=0x6300;
	to=0x77FF;
	break;
	case 2:fr=0x7800;
	to=0x8CFF;
	break;
	case 3:fr=0x8D00;
	to=0x9FCC;
	break;
}
rv=String.fromCharCode(Math.floor(fr + Math.random() * (to-fr+1)));
	return rv;
}
function _rand(){
	switch(Date.now()%8){
	case 0:ts="binary";
	break;
	case 1:ts="hex-upper case";
	break;
	case 2:ts="hex-lower case";
	break;
	case 3:ts="eng-upper case";
	break;
	case 4:ts="eng-lower case";
	break;
	case 5:ts="decimal";
	break;
	case 6:ts="chinese";
	break;
	case 7:ts="mix";
	break;
}
}
function os(){
	sp=parseFloat($("#spt").val());
	ts=$("#ics").val();
	$("g").css("color",$("#tct").val());
	$("#dv").css("background-color",$("#bct").val());
	$("g").css("font-family",$("#ft").val());
	hh=parseFloat($("#bt").val());
	mfs=parseFloat($("#mfss").val());
	if(ts=="random"){
	_rand();
}
if($("#awb").is(":checked")){
	$("#wb").css("display","");
}
else{
	$("#wb").css("display","none");
}
hb=$("#icb").is(":checked");
}
function oso(){
	jl();
	$("g").remove();
	b=parseInt($("#aoct").val());
	start();
}

JS代码(settings.js):

//speed(milliseconds)var sp=3000;
	//amount of charactersvar b=50;
	//average font sizevar mfs=1.1;
	//blurvar hh=1.72;
	//have blur(only works on webkit browsers like safari and google chrome)var hb=false;
	//text mode/*value can be:"binary""hex-upper case""hex-lower case""eng-upper case""eng-lower case""decimal""chinese""mix""random"*/
var ts="binary";

CSS代码(general.css):

#dv{margin:0;padding:0;left:0px;top:0px;height:100%;width:100%;/*background color*/
background-color:Black;position:fixed;z-index:-1000;}
/*styles for the texts*/
g{font-smooth:antialiased;background-color:transparent;-webkit-font-smoothing:antialiased;font-family:Arial,Helvetica,sans-serif;-webkit-filter:blur(0px);-moz-filter:blur(0px);-ms-filter:blur(0px);-o-filter:blur(0px);filter:blur(0px);text-decoration:none;top:-30%;/*text color*/
color:#43EF18;z-index:9999;position:fixed;font-size:200%;-moz-outline:none;outline:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;cursor:default;}
#st{background:#43ef18;background:-moz-radial-gradient(center,ellipse cover,#43ef18 0%,#0cb500 100%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,#43ef18),color-stop(100%,#0cb500));background:-webkit-radial-gradient(center,ellipse cover,#43ef18 0%,#0cb500 100%);background:-o-radial-gradient(center,ellipse cover,#43ef18 0%,#0cb500 100%);background:-ms-radial-gradient(center,ellipse cover,#43ef18 0%,#0cb500 100%);background:radial-gradient(ellipse at center,#43ef18 0%,#0cb500 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#43ef18',endColorstr='#0cb500',GradientType=1 );width:23%;float:right;background-color:#43EF18;border-radius:10px;z-index:10;position:relative;border:5px solid;}

附件:下载该文件资源,减少时间成本(增值服务)