[JS,NodeJs]个人网站效果代码集合

上次发的个人网站效果代码集合：

代码集合：

1.彩色文字墙[鼠标涟漪痕迹]

2.彩色旋转圆环

[模仿http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/中间部分效果，

那个走路的孩子技术很简单，和以前的春分秋分Google的Doodles类似，就没有模仿，换成一个头像]

3.视屏拼图

4.百度地图api简单应用集合

5.财经数据

6.天气预报

[nodejs搭建,express框架,nodejs简单页面抓取,JS正则,canvas光晕效果]

7.打字效果

8.自动换色彩色文字

---

上次个人主页的截图：[服务器网速慢，加载耗些时间；尚未做做浏览器判断和浏览器大小变化后的自适应]

主页地址：wangxinsheng.herokuapp.com

[主页：彩色文字墙，彩色旋转圆环]

[财经数据，之前是通过服务器去请求数据，现在直接由客户端请求数据]

[天气预报：PM2.5已经更新过，先看中国天气网的数据，没有在抓取美国大使馆的数据。尚未做地理判断和其他天气Canvas效果，只有光晕效果]

[简单打字效果]

[单html页面]

[百度地图api简单应用集合]

[视屏拼图：自己做的，canvas和video以及JS的集合效果]

[动态彩色文字]

---

单该能示例代码：

1.彩色文字墙[鼠标涟漪痕迹]：

 

js:

  1 var bgCanvas;
  2 $(function(){
  3     var bgCanvas = new bgC();
  4     bgCanvas.init(function(){
  5         bgCanvas.doAnimate(bgCanvas);
  6     });
  7 });
  8 function bgC(){
  9     this.textArr = ["对象","Java","C#","ASP.NET","PHP","NODEJS","C","Python","Socket","RESTful","VBA","JavaScript","JQuery","GSAP","ExtJs","WebApp","Android","HTML5","CSS2","CSS3","SqlServer","Oracle","MySQL","SQLite","MongoDB","Struts","Spring","SSH","Seasar2","AOP","IoC","闭包","反射","代理"],
 10     this.colorArr = [
 11         {"fill":"rgba(255,0,0,0.1)","stroke":"rgba(0,0,255,0.3)"},
 12         {"fill":"rgba(255,0,0,0.1)","stroke":"rgba(0,0,255,0.3)"},
 13         {"fill":"rgba(0,0,255,0.1)","stroke":"rgba(255,0,0,0.3)"},
 14         {"fill":"rgba(232,193,254,0.1)","stroke":"rgba(162,0,255,0.3)"},
 15         {"fill":"rgba(254,199,121,0.1)","stroke":"rgba(255,150,0,0.3)"},
 16         {"fill":"rgba(0,156,143,0.1)","stroke":"rgba(0,255,243,0.3)"},
 17         {"fill":"rgba(216,136,108,0.1)","stroke":"rgba(255,66,0,0.3)"},
 18 {"fill":"rgba(0,255,0,0.2)","stroke":"rgba(255,0,0,0.3)"}
 19     ],
 20     this.parent = "body"//"#outDiv",
 21     this.me;
 22     this.docH = 0,
 23     this.docW = 0,
 24     this.drawTop = -20,
 25     this.drawLeft = -100,
 26     this.maxLines=3,
 27     this.lineH=0,
 28     this.showLines=5,
 29     this.cObj, //screen canvas
 30     this.cC, //screen Context
 31     this.cbObj, //back canvas
 32     this.cbC, //back Context
 33     this.circles = new Array(),
 34     this.bigger = 1,
 35     this.outter = 0.008,
 36     this.lastFpsUpdateTime=new Date,
 37     this.init = function(doAnimate){
 38         this.me = this;
 39         // single line height
 40         this.docW = $(document).width();
 41         this.docH = $(document).height();
 42         // patten 1
 43         //this.lineH = this.docH/this.showLines;
 44         // patten 2
 45         this.lineH = 150;
 46         this.showLines = Math.ceil(this.docH/this.lineH);
 47 
 48         //append mouse DOM canvas
 49         $(this.parent).prepend($("<canvas id='cbObj' width="+this.docW+" height="+this.docH+"></canvas>").css({"display":"block","left":"0px","top":"0px"}));
 50         // append screen DOM canvas
 51         $(this.parent).prepend($("<canvas id='cObj' width="+this.docW+" height="+this.docH+"></canvas>").css({"position":"absolute","left":"0px","top":"0px"}));
 52         // get canvas and context
 53         this.cObj = document.getElementById('cObj');
 54         this.cC = cObj.getContext('2d');
 55         this.cbObj = document.getElementById('cbObj');
 56         this.cbC = cbObj.getContext('2d');
 57 
 58         //draw texts
 59         this.drawTexts();
 60 
 61         // onmousemove bound
 62         this.Bind($(document), "mousemove", this.doMM, this);
 63 
 64         // simple animation
 65         //setInterval(this.doAnimate,500);
 66         setInterval(doAnimate,10);
 67     },
 68     this.drawTexts = function(){
 69         var maxLinesH = 0;
 70         var maxLinesW = 0;
 71         while(this.drawTop<this.docH){
 72             maxLinesH = this.lineH;
 73             while(this.drawLeft < this.docW){
 74                 // random lines
 75                 linesAll =  Math.round(Math.random()*(this.maxLines-1)+1);
 76                 // calc lines
 77                 var lines = new Array();
 78                 var oneLineH = this.lineH / linesAll;
 79                 for(i=0;i<linesAll;i++){
 80                     // random text
 81                     textI = Math.round(Math.random()*(this.textArr.length-1));
 82                     colorI = Math.round(Math.random()*(this.colorArr.length-1));
 83 
 84                     // calc max line width
 85                     textMetrics = this.cC.measureText(this.textArr[textI]);
 86                     maxLinesW = textMetrics.width>maxLinesW?textMetrics.width:maxLinesW;
 87                     //console.log(textMetrics);
 88 
 89                     // calc top and left
 90                     lineTop = this.drawTop + (i+0.5) * oneLineH;
 91 
 92                     // store information
 93                     lines.push({"text":this.textArr[textI],"color":this.colorArr[colorI],"top":lineTop,"font":Math.floor(oneLineH/(Math.random()*1.5+1))});
 94                 }
 95                 left = this.drawLeft + maxLinesW * 0.5;
 96                 this.drawText(lines,left);
 97                 this.drawLeft += maxLinesW;
 98             }
 99             this.drawLeft = 0;
100             this.drawTop += maxLinesH;
101             //console.log(this.drawTop);
102         }
103     },
104     this.drawText = function(lines,left){
105         //console.log(lines,left);
106         for(i=0;i<lines.length;i++){
107             this.cC.save();
108             //console.log(textI);
109 
110             this.cC.font=lines[i].font+"px Georgia";
111             this.cC.textBaseline = 'middle';//设置文本的垂直对齐方式
112             this.cC.textAlign = 'center'; //设置文本的水平对对齐方式
113             this.cC.fillStyle = lines[i].color.fill;
114             this.cC.strokeStyle = lines[i].color.stroke;
115             this.cC.fillText(lines[i].text, left,lines[i].top);
116             this.cC.strokeText(lines[i].text, left,lines[i].top);
117 
118             this.cC.restore();
119         }
120     },
121     this.doMM = function(e){
122         this.circles.push(
123         {
124             'x':e.pageX,
125             'y':e.pageY,
126             'colorR':Math.floor(Math.random()*255),
127             'colorG':Math.floor(Math.random()*255),
128             'colorB':Math.floor(Math.random()*255),
129             'a':0.5,
130             'r':1
131         });
132         this.doAnimate(this);
133         //console.log(this.circles);
134     },
135     this.doAnimate = function(thisObj){
136         
137         thisObj.cbC.clearRect(0,0,thisObj.docW,thisObj.docH);
138         thisObj.cbC.save();
139         var delArr = new Array();
140         for(i=0;i<thisObj.circles.length;i++){
141             thisObj.circles[i].a -= thisObj.outter;
142             thisObj.circles[i].r += thisObj.bigger;
143             thisObj.cbC.fillStyle = "rgba("+thisObj.circles[i].colorR+","+thisObj.circles[i].colorG+","+thisObj.circles[i].colorB+","+thisObj.circles[i].a+")";
144             
145             thisObj.cbC.beginPath();
146             thisObj.cbC.arc(thisObj.circles[i].x,thisObj.circles[i].y,thisObj.circles[i].r,0,Math.PI*2,true);
147             thisObj.cbC.closePath();
148             thisObj.cbC.fill();
149             if(thisObj.circles[i].a<0.05){
150                 delArr.push(i);
151             }
152         }
153         thisObj.cbC.restore();
154         for(j=delArr.length-1;j>=0;j--){
155             thisObj.circles.splice(j,1);
156         }
157         
158     },
159     this.Bind = function (control, eventName, callBack, scope) {
160         if (!scope) { scope = window; }
161         $(control).bind(eventName, function () {
162             callBack.apply(scope, arguments);
163         });
164     }
165 }

下载示例：

http://download.csdn.net/detail/wangxsh42/8411845

---

2.彩色旋转圆环

html:

  1 <style>
  2 body{
   
  3     margin:0;
  4     overflow:hidden;
  5 }
  6 #outDiv{
   
  7     position:relative;
  8     top:0px;
  9     left:0px;
 10     margin:0;
 11     height:430px;
 12     width:100%;
 13     overflow:hidden;
 14     /*margin-top:30px;*/
 15 }
 16 #wheel-center{
   
 17     background:transparent url("aaajpg.jpg") no-repeat center center;
 18     width:340px;
 19     height:340px;
 20     position: absolute;
 21     border-radius:170px;
 22     left:50%;
 23     top:50%;
 24     margin-left: -170px;
 25     margin-top: -170px;
 26     /*-webkit-filter: blur(3px);*/
 27     /*-webkit-filter: blur(1px);*/
 28 }
 29 #wheel-container-inner{
   
 30     background:transparent url("gray.png") no-repeat center center;
 31     width:430px;
 32     height:430px;
 33     position: absolute;
 34     border-radius:215px;
 35     left:50%;
 36     top:50%;
 37     margin-left: -215px;
 38     margin-top: -215px;
 39 }
 40 .wheel-color-container{
   
 41     width:430px;
 42     height: