上次发的个人网站效果代码集合：
代码集合：
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:430px;
43 position: absolute;
44 border-radius:215px;
45 left:50%;
46 top:50%;
47 margin-left: -215px;
48 margin-top: -215px;
49 /*background-position:125% 75%;*/
50 }
51 .wheel-color-orange{
52 background:transparent url("orange-right2.png") no-repeat;
53 background-position:100% top;
54 opacity:1;
55 transform:rotate(0deg);
56
57 }
58 .wheel-color-green{
59 background:transparent url("green-right2.png") no-repeat;
60 background-position:100% top;
61 opacity:0;
62 transform:rotate(0deg);
63
64 }
65 .wheel-color-purple{
66 background:transparent url("purple-right2.png") no-repeat;
67 background-position:100% top;
68 opacity:0;
69 transform:rotate(0deg);
70
71 }
72 .wheel-color-marine{
73 background:transparent url("marine-right2.png") no-repeat;
74 background-position:100% top;
75 opacity:0;
76 transform:rotate(0deg);
77
78 }
79 .wheel-color-red{
80 background:transparent url("red-right2.png") no-repeat;
81 background-position:100% top;
82 opacity:0;
83 transform:rotate(0deg);
84
85 }
86 .wheel-color-blue{
87 background:transparent url("blue-right2.png") no-repeat;
88 background-position:100% top;
89 opacity:0;
90 transform:rotate(0deg);
91
92 }
93 .wheel-color-gray{
94 background:transparent url("gray-right2.png") no-repeat;
95 background-position:100% top;
96 opacity:0;
97 transform:rotate(0deg);
98
99 }
100
101 .menu-tooltip-container{
102 width:30px;
103 height:30px;
104 position: absolute;
105 opacity:1;
106 left:50%;
107 top:0px;
108 margin-left: -15px;
109 margin-top: 0px;
110 }
111
112 .menu-tooltip-1{
113 left:50%;
114 top:50%;
115 margin-left: -15px;
116 margin-top: -255px;
117 /*background:url(‘1.png‘) no-repeat center center;*/
118 }
119 .menu-tooltip-2{
120 left:50%;
121 top:50%;
122 margin-left: 180px;
123 margin-top: -165px;
124 /*background:url(‘2.png‘) no-repeat center center;*/
125 }
126 .menu-tooltip-3{
127 left:50%;
128 top:50%;
129 margin-left: 225px;
130 margin-top: 40px;
131 /*background:url(‘3.png‘) no-repeat center center;*/
132 }
133 .menu-tooltip-4{
134 left:50%;
135 top:50%;
136 margin-left: 120px;
137 margin-top: 200px;
138 /*background:url(‘4.png‘) no-repeat center center;*/
139 }
140 .menu-tooltip-5{
141 left:50%;
142 top:50%;
143 margin-left: -140px;
144 margin-top: 200px;
145 /*background:url(‘5.png‘) no-repeat center center;*/
146 }
147 .menu-tooltip-6{
148 left:50%;
149 top:50%;
150 margin-left: -255px;
151 margin-top: 40px;
152 /*background:url(‘6.png‘) no-repeat center center;*/
153 }
154 .menu-tooltip-7{
155 left:50%;
156 top:50%;
157 margin-left: -210px;
158 margin-top: -165px;
159 /*background:url(‘7.png‘) no-repeat center center;*/
160 }
161
162 </style>
163 <div id="outDiv">
164 <div id="wheel-center" style="z-index:1;"></div>
165 <div id=‘wheel-container-inner‘></div>
166 <div class=‘wheel-color-container wheel-color-orange‘></div>
167 <div class=‘wheel-color-container wheel-color-green‘></div>
168 <div class=‘wheel-color-container wheel-color-purple‘></div>
169 <div class=‘wheel-color-container wheel-color-marine‘></div>
170 <div class=‘wheel-color-container wheel-color-red‘></div>
171 <div class=‘wheel-color-container wheel-color-blue‘></div>
172 <div class=‘wheel-color-container wheel-color-gray‘></div>
173 <div class=‘menu-tooltip-container menu-tooltip-1 tooltip-marine‘ data="menuMarine"><img class="initImg" src="1.png" /></div>
174 <div class=‘menu-tooltip-container menu-tooltip-2 tooltip-red‘ data="menuRed"><img class="initImg" src="2.png" /></div>
175 <div class=‘menu-tooltip-container menu-tooltip-3 tooltip-blue‘ data="menuBlue"><img class="initImg" src="3.png" /></div>
176 <div class=‘menu-tooltip-container menu-tooltip-4 tooltip-gray‘ data="menuGray"><img class="initImg" src="4.png" /></div>
177 <div class=‘menu-tooltip-container menu-tooltip-5 tooltip-orange‘ data="menuOrange"><img class="initImg" src="5.png" /></div>
178 <div class=‘menu-tooltip-container menu-tooltip-6 tooltip-green‘ data="menuGreen"><img class="initImg" src="6.png" /></div>
179 <div class=‘menu-tooltip-container menu-tooltip-7 tooltip-purple‘ data="menuPurple"><img class="initImg" src="7.png" /></div>
180 </div>
js:
1 // calc center Point
2 var cenPoint = {x:0,y:0};
3 // cur mouse point
4 var curPoint = {x:0,y:0};
5 // curAngle
6 var curAngle = 0;
7 // 颜色数组
8 var color=[
9 {
10 min:235,
11 max:270,
12 name:"orange"
13 },
14 {
15 min:170,
16 max:235,
17 name:"green"
18 },
19 {
20 min:110,
21 max:170,
22 name:"purple"
23 },
24 {
25 min:70,
26 max:110,
27 name:"marine"
28 },
29 {
30 min:20,
31 max:70,
32 name:"red"
33 },
34 {
35 min:330,
36 max:360,
37 name:"blue"
38 },
39 {
40 min:0,
41 max:20,
42 name:"blue"
43 },
44 {
45 min:270,
46 max:330,
47 name:"gray"
48 }
49 ];
50 var dataPot={
51 menuMarine : {
52 imgWay:"add",
53 imgW:30,
54 imgH:30,
55 imgL:"0px",
56 imgT:"0px",
57 divW:"20px",
58 divH:"20px",
59 divL:"5px",
60 divT:"5px",
61 arrW:"12px",
62 arrH:"20px",
63 arrL:"9px",/*d:270;l:4;t:5;;d:90;l:13;t:5;;d:180;l:9;t:10;;d:0;l:9;t:0*/
64 arrT:"10px",
65 arrDir:"180",
66 tipL: "-230px",
67 tipT: "28px",
68 tipH: "320px",
69 tipW: "500px",
70 potImg:"marine/quote1_hover.png",
71 bgColor:"rgb(101, 124, 178)",
72 src:"/test",
73 key1:"value1"
74 },
75 menuRed : {
76 imgWay:"add",
77 imgW:30,
78 imgH:30,
79 imgL:"0px",
80 imgT:"0px",
81 divW:"20px",
82 divH:"20px",
83 divL:"5px",
84 divT:"5px",
85 arrW:"12px",
86 arrH:"20px",
87 arrL:"9px",
88 arrT:"10px",
89 arrDir:"180",
90 tipL: "-500px",
91 tipT: "28px",
92 tipH: "283px",
93 tipW: "620px",
94 potImg:"red/quote1_hover.png",
95 bgColor:"rgb(127, 45, 42)",
96 src:"/weather",
97 key1:"value1"
98 },
99 menuBlue : {
100 imgWay:"add",
101 imgW:30,
102 imgH:30,
103 imgL:"0px",
104 imgT:"0px",
105 divW:"20px",
106 divH:"20px",
107 divL:"5px",
108 divT:"5px",
109 arrW:"12px",
110 arrH:"20px",
111 arrL:"4px",
112 arrT:"5px",
113 arrDir:"270",
114 tipL: "-508px",
115 tipT: "-205px",
116 tipH: "320px",
117 tipW: "500px",
118 potImg:"blue/quote2_hover.png",
119 bgColor:"rgb(120, 186, 211)",
120 src:"/print",
121 key1:"value1"
122 },
123 menuGray : {
124 imgWay:"add",
125 imgW:30,
126 imgH:30,
127 imgL:"0px",
128 imgT:"0px",
129 divW:"20px",
130 divH:"20px",
131 divL:"5px",
132 divT:"5px",
133 arrW:"12px",
134 arrH:"20px",
135 arrL:"9px",
136 arrT:"0px",
137 arrDir:"0",
138 tipL: "-400px",
139 tipT: "-322px",
140 tipH: "320px",
141 tipW: "500px",
142 potImg:"gray/quote1_hover.png",
143 bgColor:"rgb(88, 90, 96)",
144 src:"/links",
145 key1:"value1"
146 },
147 menuOrange : {
148 imgWay:"add",
149 imgW:30,
150 imgH:30,
151 imgL:"0px",
152 imgT:"0px",
153 divW:"20px",
154 divH:"20px",
155 divL:"5px",
156 divT:"5px",
157 arrW:"12px",
158 arrH:"20px",
159 arrL:"9px",
160 arrT:"0px",
161 arrDir:"0",
162 tipL: "-100px",
163 tipT: "-322px",
164 tipH: "320px",
165 tipW: "500px",
166 potImg:"orange/quote1_hover.png",
167 bgColor:"rgb(249, 154, 45)",
168 src:"/wait",
169 key1:"value1"
170 },
171 menuGreen : {
172 imgWay:"add",
173 imgW:30,
174 imgH:30,
175 imgL:"0px",
176 imgT:"0px",
177 divW:"20px",
178 divH:"20px",
179 divL:"5px",
180 divT:"5px",
181 arrW:"12px",
182 arrH:"20px",
183 arrL:"13px",
184 arrT:"5px",
185 arrDir:"90",
186 tipL: "18px",
187 tipT: "-230px",
188 tipH: "400px",
189 tipW: "670px",
190 potImg:"green/quote1_hover.png",
191 bgColor:"rgb(92, 159, 23)",
192 src:"/guess",
193 key1:"value1"
194 },
195 menuPurple : {
196 imgWay:"add",
197 imgW:30,
198 imgH:30,
199 imgL:"0px",
200 imgT:"0px",
201 divW:"20px",
202 divH:"20px",
203 divL:"5px",
204 divT:"5px",
205 arrW:"12px",
206 arrH:"20px",
207 arrL:"9px",
208 arrT:"10px",
209 arrDir:"180",
210 tipL: "-90px",
211 tipT: "28px",
212 tipH: "410px",
213 tipW: "600px",
214 potImg:"purple/quote1_hover.png",
215 bgColor:"rgb(101, 70, 101)",
216 src:"/map",
217 key1:"value1"
218 }
219
220 };
221 window.onload = function(){
222 $("#outDiv").height($(window).height());
223 $("#outDiv").css({"position":"absolute","left":"0px","top":"0px"});
224
225 // calc center Point
226 cenPoint.x = $("#outDiv").width() * 0.5 + $("#outDiv").offset().left;
227 cenPoint.y = $("#outDiv").height() * 0.5 + $("#outDiv").offset().top;
228
229 // init mouse point
230 curPoint.x = cenPoint.x;
231 curPoint.y = cenPoint.y;
232
233 // animation test
234 TweenLite.to(
235 $(".wheel-color-container"),
236 2,
237 {
238 css: {
239 rotation:360
240 },
241 ease:Cubic.easeOut,
242 overwrite: true
243 }
244 );
245 // bind mousemove event
246 document.addEventListener("mousemove", docOnMM);
247 }
248
249 /*
250 * doc mousemove event
251 */
252 function docOnMM(event){
253 // set curPoint
254 curPoint.x = event.pageX;
255 curPoint.y = event.pageY;
256 // repaint the center circle
257 paintCC();
258 }
259
260 /*
261 * calc angle
262 * 当前的计算不好，太字面了
263 * 有时间的话，先改变坐标体系，这样看着更舒服吧
264 */
265 function calcAngle(){
266 // 角度
267 var angle;
268 // 象限差额角度
269 var addJD = 0;
270 // 是否需要进行角度计算
271 var calcJDFlg = false;
272 // 象限判断临时变量 xx:1,2,3,4
273 var xxX,xxY,xx;
274
275 // 象限判断
276 xxX=(curPoint.x - cenPoint.x)>0 ? 1: ((curPoint.x - cenPoint.x==0)?0:-1);
277 xxY=(curPoint.y - cenPoint.y)>0 ? 1: ((curPoint.y - cenPoint.y==0)?0:-1);
278 if(xxX==0 && xxY==0){
279 angle = "NaN";
280 }else if(xxX==0){
281 if(xxY>0){
282 angle = 270;
283 }else{
284 angle = 90;
285 }
286 }else if(xxY==0){
287 if(xxX>0){
288 angle = 0;
289 }else{
290 angle = 180;
291 }
292 }else{
293 calcJDFlg = true;
294 if(xxX>0){
295 if(xxY>0){
296 addJD = 270;
297 xx = 4;
298 }else{
299 addJD = 0;
300 xx = 1;
301 }
302 }else{
303 if(xxY>0){
304 addJD = 180;
305 xx = 3;
306 }else{
307 addJD = 90;
308 xx = 2;
309 }
310 }
311 }
312
313 // 计算锐角
314 if(calcJDFlg){
315 // calc ruiJiao
316 var duiBian,linBian;
317 var a = cenPoint;
318 var b = curPoint;
319 var c = {x:cenPoint.x,y:curPoint.y};
320 duiBian = Math.abs(c.x-b.x);
321 linBian = Math.abs(c.y-a.y);
322 var huDu = Math.atan(duiBian/linBian);
323 var jiaoDu = huDu * (180 / Math.PI);
324 if(xx%2==0){
325 angle = addJD + jiaoDu;
326 }else{
327 angle = 90 + addJD - jiaoDu;
328 }
329 }
330
331 return angle;
332 }
333
334 /*
335 * paint the center circle;
336 */
337 function paintCC(){
338 var angle = calcAngle();
339 var picName = "";
340 if(angle=="NaN"){
341 // 圆点
342 }else{
343 // 头像
344 TweenLite.to(
345 $("#wheel-center"),
346 0.3,
347 {
348 css: {
349 rotationY: (angle>270 || angle<90)? 180: 0
350 }
351 ,onComplete:function(){
352 TweenLite.to(
353 $("#wheel-center"),
354 0.5,
355 {
356 css:{
357 shortRotation: -1*((angle>270 || angle<90)? (angle+20): (angle-180-20))
358 }
359 }
360 );
361 }
362 }
363 );
364 // 判断显示颜色种别
365 color.forEach(function(item){
366 if(angle>=item.min && angle<item.max){
367 picName = item.name;
368
369 TweenLite.to(
370 $(".wheel-color-"+item.name),
371 0.5,
372 {
373 css: {
374 opacity: 1
375 }
376 }
377 );
378 }
379 });
380 color.forEach(function(item){
381 if(picName!=item.name){
382 TweenLite.to(
383 $(".wheel-color-"+item.name),
384 0.3,
385 {
386 css: {
387 opacity: 0
388 }
389 }
390 );
391 }
392 });
393
394 // 旋转
395 TweenLite.to(
396 $(".wheel-color-container"),
397 1.5,
398 {
399 css: {
400 shortRotation: angle * -1
401 },
402 ease:Back.easeOut//Cubic
403 }
404 );
405 }
406 }
下载示例：
http://download.csdn.net/detail/wangxsh42/8411843
---
3.视屏拼图
以前博文：http://www.cnblogs.com/wangxinsheng/articles/3800710.html
由于浏览器升级后对video标签支持的一些小变更，如果不能播放，代码内需要在加载后添加播放操作
下载：http://download.csdn.net/detail/wangxsh42/7530147
---
4.百度地图api简单应用集合
百度地图算然好用，但是地图上面的点[自带的地点对象]点击后弹出的窗口[路线查询，周边查询等]会弹出新页面，到他自己的网站去
用的一定不太爽，我就试着把那些东西给替换了。。。应该不算侵权把，毕竟那个[© 2015 Baidu]还留着。。。
百度地图key可以免费申请
代码：
js代码段
1 var mapClick = {‘lng‘:‘‘,‘lat‘:‘‘};
2 var map;
3 $(function(){
4 $(‘#opp‘).css(‘left‘,$(‘#allmap‘).offset().left+"px");
5 $(‘#result‘).hide();
6 $("#opp").height(50);
7 loadJScript(); //异步加载地图
8 })
9
10 function myFun(result){
11 var cityName = result.name;
12 //alert("当前定位城市:"+cityName);
13 $("#wxsSearch").val(cityName);
14 if(cityName!="全国" && cityName!=""){
15 map.setCenter(cityName);
16 $("#wxsDoSearch").click();
17 }
18 }
19
20 //百度地图API功能
21 function loadJScript() {
22 var script = document.createElement("script");
23 script.type = "text/javascript";
24 script.src = "http://api.map.baidu.com/api?v=2.0&ak=yW4S1ZIFFRGfGv1PwYc8ZIHB&callback=onMapLoaded";
25 document.body.appendChild(script);
26 }
27 function onMapLoaded() {
28 var script = document.createElement("script");
29 script.type = "text/javascript";
30 script.src = "http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js";
31 document.body.appendChild(script);
32
33 map = new BMap.Map("allmap"); // 创建Map实例
34 //var point = new BMap.Point(116.404, 39.915); // 创建点坐标
35 //map.centerAndZoom(point,15);
36
37 map.centerAndZoom("上海",15);
38 map.enableScrollWheelZoom(); //启用滚轮放大缩小
39
40 map.addEventListener("click", function(e){
41 //alert(e.point.lng + ", " + e.point.lat);
42 mapClick = {‘lng‘:e.point.lng,‘lat‘:e.point.lat};
43 $("#result").hide();
44 $("#opp").height(50);
45 //console.log(mapClick);
46 });
47 $("#wxsSearch").click(function(e){/*alert(‘a‘);*/$("#result").show();$("#opp").height(400);});
48 $("#showR").click(function(e){
49 if($("#result").is(":hidden")){
50 $("#result").show();$("#opp").height(400);
51 }else{
52 $("#result").hide();
53 $("#opp").height(50);
54 }
55 });
56 var ac1 = new BMap.Autocomplete( //建立一个自动完成的对象
57 {"input" : "wxsSearch"
58 ,"location" : map
59 });
60 ac1.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
61 var _value = e.item.value;
62 myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
63 //console.log(myValue);
64 $("#wxsSearch").val(myValue);
65 });
66 $(‘#wxsDoSearch‘).click(function(){
67 $("#result").html(‘‘).show();$("#opp").height(400);
68 var options = {
69 onSearchComplete: function(results){
70 //console.log(‘complete‘,local.getStatus(),BMAP_STATUS_SUCCESS);
71 // 判断状态是否正确
72 if (local.getStatus() == BMAP_STATUS_SUCCESS){
73 //var s = [];
74 var ulStr="<ul>";
75 for (var i = 0; i < results.getCurrentNumPois(); i ++){
76 var liStr = "<li onclick=‘doFindPL(this);‘ lat=‘%lat%‘ lng=‘%lng%‘><span class=‘liName‘>%title%</span><br /><span class=‘liAdd‘>%address%</span></li>";
77 liStr=liStr.replace(/\%lat%/g,results.getPoi(i).point.lat);
78 liStr=liStr.replace(/\%lng%/g,results.getPoi(i).point.lng);
79 liStr=liStr.replace(/\%title%/g,results.getPoi(i).title);
80 ulStr+=liStr.replace(/\%address%/g,results.getPoi(i).address);
81 //console.log(results.getPoi(i));
82 //s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
83 }
84 ulStr+= "</ul>";
85 //console.log(ulStr);
86 $("#result").html(ulStr);
87 //document.getElementById("r-result").innerHTML = s.join("<br/>");
88 //console.log(s.join("<br/>"));
89 }
90 }
91 };
92 var local = new BMap.LocalSearch(map, options);
93 /*var local = new BMap.LocalSearch(map, {
94 renderOptions:{map: map}
95 });*/
96 //console.log(‘doSearch‘);
97 local.search($(‘#wxsSearch‘).val());
98 });
99
100 var myCity = new BMap.LocalCity();
101 myCity.get(myFun);
102
103 setInterval(removeBD,100);
104 }
105 function doFindPL(thisObj){
106 //创建检索信息窗口对象
107 var searchInfoWindow = null;
108 searchInfoWindow = new BMapLib.SearchInfoWindow(map, ‘地址：‘+$($(thisObj).find(".liAdd")[0]).html(), {
109 title : $($(thisObj).find(".liName")[0]).html(), //标题
110 //width : 290, //宽度
111 //height : 105, //高度
112 panel : "result", //检索结果面板
113 enableAutoPan : true, //自动平移
114 searchTypes :[
115 BMAPLIB_TAB_SEARCH, //周边检索
116 BMAPLIB_TAB_TO_HERE, //到这里去
117 BMAPLIB_TAB_FROM_HERE //从这里出发
118 ]
119 });
120 //var poi = new BMap.Point($(thisObj).attr(‘lat‘),$(thisObj).attr(‘lng‘));
121 var poi = new BMap.Point($(thisObj).attr(‘lng‘),$(thisObj).attr(‘lat‘));
122 var marker = new BMap.Marker(poi); //创建marker对象
123 //marker.enableDragging(); //marker可拖拽
124 marker.addEventListener("click", function(e){
125 searchInfoWindow.open(marker);
126 });
127 map.clearOverlays();
128 map.addOverlay(marker); //在地图中添加marker
129 map.panTo(poi);
130 mapClick.lng=$(thisObj).attr(‘lng‘);
131 mapClick.lat=$(thisObj).attr(‘lat‘);
132 }
133 function removeBD(){
134 //<input type="text" id="tangram-suggestion--TANGRAM__2x-input" autocomplete="off" style="height: 22px; line-height: 22px; padding: 0px; margin: 0px; border: 1px solid rgb(165, 172, 178); width: 85px;">
135 $("input[org!=wxs][type=text]").each(function(index){
136 if($(this).attr("id")!=undefined)return;
137 var id="suggestId"+new Date().getTime();
138 var replaceBtn = "<input id=‘"+id+"‘ type=‘text‘ value=‘‘ style=‘"+
139 $(this).attr("style")+"‘ org=‘wxs‘ width=‘"+$(this).width()+"px‘>";
140 $(this).parent().append($(replaceBtn));
141 $(this).remove();
142
143 var ac = new BMap.Autocomplete( //建立一个自动完成的对象
144 {"input" : id
145 ,"location" : map
146 });
147 ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
148 var _value = e.item.value;
149 myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
150 //console.log(myValue);
151 $("#"+id).val(myValue);
152 });
153 });
154 $("input[org!=wxs][type=button]").each(function(index){
155 if($(this).attr("id")!=undefined)return;
156 var valueBtn="";
157 if($(this).attr("value")=="导航")
158 {
159 valueBtn = "步行";
160 }else{
161 valueBtn = $(this).attr("value");
162 }
163 var replaceBtn = "<input type=‘button‘ value=‘"+
164 valueBtn+"‘ style=‘"+
165 $(this).attr("style")+"‘ org=‘wxs‘ onclick=‘rBtnClick(this)‘>";
166 $(this).parent().append($(replaceBtn));
167 $(this).remove();
168 });
169 $("input[org!=wxs][type=submit]").click(function(e){$(‘#result‘).show();$("#opp").height(400);});
170 $("input[org!=wxs][id^=BMapLib_]").click(function(e){$(‘#result‘).show();$("#opp").height(400);});
171 $("a[filter=query]").each(function(index){
172 var replaceBtn = "<a style=‘cursor:pointer;"+
173 $(this).attr("style")+"‘ onclick=‘rAClick(\""+$(this).html()+"\")‘>"+$(this).html()+"</a>";
174 $(this).parent().append($(replaceBtn));
175 $(this).remove();
176 });
177 $("a[filter=detailInfo]").each(function(index){
178 var replaceBtn = "<a style=‘"+
179 $(this).attr("style")+"‘>"+$(this).html()+"</a>";
180 $(this).parent().append($(replaceBtn));
181 $(this).remove();
182 });
183 $("a[filter=detailLink]").remove();
184 $("a[target=_blank]").remove();
185 $("img[title=发送到手机]").remove();
186 $(".tangram-suggestion").css(‘z-index‘,‘100‘);
187 if($("#result").is(":hidden")){
188 $("#showR").html("显示结果");
189 }else{
190 $("#showR").html("收起结果");
191 }
192 }
193 function rAClick(val){
194 map.clearOverlays();
195 var mPoint = new BMap.Point(mapClick.lng, mapClick.lat);
196 var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
197 map.addOverlay(circle);
198 var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false, panel: "result"}});
199 var bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
200 local.searchInBounds(val,bounds);
201 $("#result").show();$("#opp").height(400);
202 }
203 function rBtnClick(thisObj){
204 map.clearOverlays();
205 if($(thisObj).parent().html().indexOf("起点")!=-1){
206 var text = $($(thisObj).parent().find("input[type=text]")[0]).val()
207 alert(‘起点：‘+text+" BTN:"+$(thisObj).val());
208 var start = text,end = new BMap.Point(mapClick.lng, mapClick.lat);
209 if($(thisObj).val()=="公交"){
210 var transit = new BMap.TransitRoute(map, {
211 renderOptions: {map: map, panel: "result"},
212 onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
213 });
214 transit.search(start,end);
215 }else if($(thisObj).val()=="驾车"){
216 var driving = new BMap.DrivingRoute(map, {
217 renderOptions: {map: map, panel: "result"},
218 onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
219 });
220 driving.search(start, end);
221 }else if($(thisObj).val()=="步行"){
222 var walking = new BMap.WalkingRoute(map, {
223 renderOptions: {map: map, panel: "result"},
224 onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
225 });
226 walking.search(start, end);
227 }
228 }else if($(thisObj).parent().html().indexOf("终点")!=-1){
229 var text = $($(thisObj).parent().find("input[type=text]")[0]).val()
230 //alert(‘终点：‘+text+" BTN:"+$(thisObj).val());
231 if($(thisObj).val()=="公交"){
232 var end = text,start = new BMap.Point(mapClick.lng, mapClick.lat);
233 var transit = new BMap.TransitRoute(map, {
234 renderOptions: {map: map, panel: "result"},
235 onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
236 });
237 transit.search(start,end);
238 }else if($(thisObj).val()=="驾车"){
239 var driving = new BMap.DrivingRoute(map, {
240 renderOptions: {map: map, panel: "result"},
241 onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
242 });
243 driving.search(start, end);
244 }else if($(thisObj).val()=="步行"){
245 var walking = new BMap.WalkingRoute(map, {
246 renderOptions: {map: map, panel: "result"},
247 onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
248 });
249 walking.search(start, end);
250 }
251 }else{
252 var text = $($(thisObj).parent().find("input[type=text]")[0]).val();
253 //alert(‘附近：‘+text+" BTN:"+$(thisObj).val());
254 var mPoint = new BMap.Point(mapClick.lng, mapClick.lat);
255 var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
256 map.addOverlay(circle);
257 var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false, panel: "result"}});
258 var bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
259 local.searchInBounds(text,bounds);
260 $("#result").show();$("#opp").height(400);
261 }
262 }
下载地址：
http://download.csdn.net/detail/wangxsh42/8412387
5. 财经数据
http://www.cnblogs.com/wangxinsheng/p/4260726.html
代码下载：
http://files.cnblogs.com/files/wangxinsheng/financial.rar
可以做个tab，配合财经新闻
http://www.cnblogs.com/wangxinsheng/p/4251228.html
6.天气预报
[nodejs搭建,express框架,nodejs简单页面抓取,JS正则,canvas光晕效果]
在线：http://wangxinsheng.herokuapp.com/weather [heroku服务器访问国内好像很慢。。。所以抓取页面也特别慢]
效果图：
1)windows下nodejs搭建很简单
到nodeJS官网下载安装包，双击安装
会自动往path里追加node命令路径
nodejs入门：http://www.cnblogs.com/wangxinsheng/articles/4056086.html
2)关于npm
http://www.cnblogs.com/wangxinsheng/articles/4056877.html
如果遇到npm安装时报错，说什么npm不存在
只要在提示路径下新建npm文件夹就可以了
3)express安装：
npm下载express
用express命令安装即可
[使用 express -e 命令创建 express 项目,不同于3.x，4.x需要再安装express-generator]
目录结构会一起生成
4)express页面抓取代码片段
由于天气预报我是直接从网页上抓取[get方法]来的，需要下面代码：
routes/spider.js 发送请求与获取数据
1 var http = require(‘http‘);
2
3 module.exports =function(nPage, opt,resEncoding, fnSpiderData)
4 {
5 var req = http.request(opt, function(res)
6 {
7 res.setEncoding(resEncoding);
8
9 var g_data="";
10 res.on(‘data‘, function (chunk)
11 {
12 g_data+=chunk;
13 });
14
15 res.on(‘end‘, function()
16 {
17 console.log("do page " + nPage);
18 fnSpiderData(g_data,res.headers["content-type"], nPage);
19 });
20 });
21
22 req.on(‘error‘, function(e)
23 {
24 console.log(‘problem with request ‘ + opt.path + ‘ : ‘ + e.message);
25 });
26
27 req.end();
28 }
routes/index.js 路由+请求参数设置 片段
1 var spider = require(‘./spider‘);
2
3 app.get(‘/req/:getType/:returnType/:reqUrl‘,function(req,res){
4 //res.send("hello, req!\ngetType:"+req.params.getType+"\nreturnType:"+req.params.returnType+"\nURL:"+req.params.reqUrl);
5 /**
6 * http get
7 */
8
9 console.log(‘got starting...‘);
10 console.log(‘:‘+URL.parse(req.url).query+":");
11 var auth=new Buffer(‘代理用户名:代理密码‘).toString(‘base64‘),
12 pathStr = req.params.reqUrl+(URL.parse(req.url).query!=null?"?"+URL.parse(req.url).query:"")
13 op={
14 host:pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,‘‘), //使用vpn代理时，是代理地址
15 port:80,//使用vpn代理时，是代理端口
16 method:‘GET‘,
17 path:pathStr,
18 headers:{
19 ‘Proxy-Authorization‘:‘Basic ‘+auth,
20 ‘Host‘:pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,‘‘),
21 "User-Agent":"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.92 Safari/537.1 LBBROWSER",
22 "Referer":pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,‘‘)
23 }
24 }
25 var resEncoding = ‘‘;
26 if(req.params.returnType!="img")
27 {
28 resEncoding = ‘utf8‘;
29 }else{
30 resEncoding = ‘binary‘;
31 }
32 spider(0,op,resEncoding,function(data,dataType,page){
33 if(req.params.returnType!="img")
34 {
35 console.log("not img:"+dataType);
36 res.send(data);
37 }
38 //‘<img src="http://localhost:3000/req/getT/img/http:%2F%2Fwww.baidu.com%2Fimg%2Fbdlogo.png" />‘
39 else{
40 console.log("img:"+dataType);
41 res.writeHead(200, {"content-type":dataType});
42 res.write(data, "binary");//res.send(data);
43 //res.write(data);
44 res.end();
45 }
46 });
47 // end http get
48
49 });
前台js片段[使用正则匹配]：
1 function getData(){
2 var key = 1;
3 $.ajax({
4 type: "GET",
5 url: "/req/getT/text/http:%2F%2Fwww.weather.com.cn%2Fweather%2F101020100.shtml?_="+new Date().getTime(),
6 dataType:"text",
7 success: function(data){
8 /*
9 var str = ‘aabbazbbwwbbaa‘;
10 var arr =str.match(/.*bb/); //aabbazbbwwbb，贪婪的
11 console.log(‘1‘,arr);
12 var arr =str.match(/.*?bb/g); //aabb azbb wwbb 返回一个数组包含3个值，惰性的
13 console.log(‘2‘,arr);
14 */
15 //console.log(‘data‘,data);
16 var regEx;
17 var regEx1 = /<li class=‘dn.*‘ data-dn=‘7d1‘>(.|\n)*?<\/li>/gi;
18 var regEx2 = /<li class=‘dn.*‘ data-dn=‘7d2‘>(.|\n)*?<\/li>/gi;
19 var regEx3 = /<li class=‘dn.*‘ data-dn=‘7d3‘>(.|\n)*?<\/li>/gi;
20 var regEx4 = /<li class=‘dn.*‘ data-dn=‘7d4‘>(.|\n)*?<\/li>/gi;
21 var regEx5 = /<li class=‘dn.*‘ data-dn=‘7d5‘>(.|\n)*?<\/li>/gi;
22 for(i=1;i<6;i++){
23 eval("regEx = regEx"+i);
24 var r = data.match(regEx);
25 //console.log(r);
26 var dweek = r[0].match(/<h1>(.|\n)*?<\/h1>/gi);
27 //console.log(dweek);
28 var dday = r[0].match(/<h2>(.|\n)*?<\/h2>/gi);
29 //console.log(dday);
30 var dtq = r[0].match(/<p class="wea">(.|\n)*?<\/p>/gi);
31 //console.log(dtq);
32 var dtemp1 = r[0].match(/<p class="tem tem1">(.|\n)*?<\/p>/gmi);
33 //console.log(dtemp1);
34 var dtemp2 = r[0].match(/<p class="tem tem2">(.|\n)*?<\/p>/gmi);
35 //console.log(dtemp2);
36 var df = r[0].match(/<p class="win">(.|\n)*?<\/p>/gi);
37 //console.log(‘df‘,df);
38 var df2 = df[0].match(/<i>(.|\n)*?<\/i>/gi);
39 //console.log(df2);
40 var df1s,df1;
41 if(df.length>0){
42 df1s = df[0].match(/title=\"[^\"]*?\"/gi);
43 }
44 if(dweek!=null && 1<=dweek.length){
45 //console.log(delTag(dweek[0]));
46 $(‘.d‘+i+‘week‘).html(‘ ‘+delTag(dweek[0])+‘ ‘);
47 }
48 if(dday!=null && 1<=dday.length){
49 //console.log(delTag(dday[0]));
50 $(‘.d‘+i+‘day‘).html(‘ ‘+delTag(dday[0])+‘ ‘);
51 }
52 if(dtq!=null && 1<=dtq.length){
53 //console.log(delTag(dtq[0]));
54 $(‘.d‘+i+‘tq‘).html(‘ ‘+delTag(dtq[0])+‘ ‘);
55 if(i==1){
56 $(‘.d‘+i+‘bg‘).css({
57 ‘background‘:‘url(tq/big/‘+changeToPic(delTag(dtq[0]),true)+‘.png)‘,
58 ‘*background‘:‘none‘,
59 ‘*filter‘:‘progid:DXImageTransform.Microsoft.AlphaImageLoader(src=tq/big/‘+changeToPic(delTag(dtq[0]),true)+‘.png)‘
60 });
61 key = changeToPic(delTag(dtq[0]),true); // 效果
62 }else{
63 $(‘.d‘+i+‘bg‘).css({
64 ‘background‘:‘url(tq/‘+changeToPic(delTag(dtq[0]))+‘.png)‘,
65 ‘*background‘:‘none‘,
66 ‘*filter‘:‘progid:DXImageTransform.Microsoft.AlphaImageLoader(src=tq/‘+changeToPic(delTag(dtq[0]))+‘.png)‘
67 });
68 }
69 }
70 if(dtemp1!=null && 1<=dtemp1.length && 1<=dtemp1.length){
71 //console.log(delTag(dtemp1[0]).replace(‘°C‘,‘‘),delTag(dtemp2[0]));
72 $(‘.d‘+i+‘temp‘).html(delTag(dtemp1[0]).replace(‘°C‘,‘‘)+(delTag(dtemp1[0]).replace(‘°C‘,‘‘)==""?‘‘:‘ ~ ‘)+(i==1?delTag(dtemp2[0]).replace(‘°C‘,‘‘)+"<sup>°C</sup>":delTag(dtemp2[0])));
73 }
74 if(df1s!=null && 1<=df1s.length/2){
75 df1 = df1s[0].substring(7,df1s[0].length-1);
76 //console.log(df1);
77 }
78 if(df2!=null && 1<=df2.length){
79 //console.log(delTag(df2[0]));
80 $(‘.d‘+i+‘f‘).html(‘ ‘+(df1!=undefined?df1:‘‘)+delTag(df2[0])+‘ ‘);
81 }
82 if(key == 1 ){
83 clearFlg();
84 drawSunFlg = true;
85 loadImg = 0;
86 drawSun();
87 }
88 }
89 }
90 });
91 }
做的比较潦草，记得css是直接用百度的
代码片段下载：
http://download.csdn.net/detail/wangxsh42/8412449
7.打字效果
以前看过做过记录，这回真正用时，发现以前的不太好用，还是需要稍稍改改
效果图：
代码段：
1 var charIndex = -1;
2 var stringLength = 0;
3 var inputText;
4 function writeContent(init){
5 if(init){
6 inputText = document.getElementById(‘contentToWrite‘).innerHTML;
7 }
8 if(charIndex==-1){
9 charIndex = 0;
10 stringLength = inputText.length;
11 }
12 var initString = document.getElementById(‘myContent‘).innerHTML;
13 initString = initString.replace(/<SPAN.*$/gi,"");
14
15 var theChar = inputText.charAt(charIndex);
16 var nextFourChars = inputText.substr(charIndex,4);
17 if(nextFourChars==‘<BR>‘ || nextFourChars==‘<br>‘){
18 theChar = ‘<BR>‘;
19 charIndex+=3;
20 }
21 charIndex = charIndex/1 +1;
22 $("#blink").remove();
23 $("#myContent").append(theChar+"<SPAN id=‘blink‘>|</SPAN>");
24 $("#myContent").scrollTop($("#myContent")[0].scrollHeight);
25 //windows.scrollTo(0,9999); //效果不好，应该使用jquery的append方法，然后再滚动到底部，这样画面不会有闪动
26 if(charIndex%2==1){
27 $(‘#blink‘).html(" ");
28 }else{
29 $(‘#blink‘).html(‘|‘);
30 }
31
32 if(charIndex<=stringLength){
33 setTimeout(‘writeContent(false)‘,50);
34 }else{
35 blinkSpan();
36 }
37 }
38 function blinkSpan(){
39 if($(‘#blink‘).html()==" "){
40 $(‘#blink‘).html("|");
41 }else{
42 $(‘#blink‘).html(" ");
43 }
44 setTimeout(‘blinkSpan()‘,500);
45 }
完整下载地址：
http://download.csdn.net/detail/wangxsh42/8412479
8.自动换色彩色文字
在线：http://wangxinsheng.herokuapp.com/wait
效果
网上搜到的不是太喜欢，还是得自己改改，加个阴影，加多点颜色，再加个动态
片段：[还是做成对象比较好。。。]
1 var message="敬请期待..." ;
2 var n=0;
3 function changeColor(){
4 $($(".word")[n]).css({"color":"rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")","text-shadow":" 5px 5px 5px rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"});
5 if(n>=$(".word").length){
6 n=0;
7 }else{
8 n++;
9 }
10 }
11 function start(c){
12 var content = "";
13 for(i=0;i<c.length;i++){
14 content +="<span class=‘word‘ style=‘color:rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+");text-shadow: 5px 5px 5px rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+");‘>"+c.charAt(i)+"</span>";
15 }
16 $("#myContent").append($(content));
17 setInterval("changeColor()",100);
18 }
19 start(message);
下载地址：
http://download.csdn.net/detail/wangxsh42/8412507
----
突然觉得怎么弄了那么个简单的主页。。。
日志博客用[fff]那个样子(我已经看完他的代码了，主页其实一点不难)
其余部分继续模仿[moma.org]那个样子
这样改多好
果然还是比较喜欢有创造性的工作
现在的工作。。。哎。。。
时间： 2024-10-11 01:37:07