精简新浪微博界面

UPDATE: 最近更新于2012年3月1日.
在github上建了一个repository,更新起来方便点.点此传送.

作为一个处女座,每当我屡屡看见新浪微博的输入框下的那一坨花花绿绿的广告,总是会忍不住去把它点掉,可恶心的是点掉之后过不了多久又会出来…于是去找插件,看到了一个chrome插件,叫Stylish,可以自定义网页的css.
接着发现已经有人写过类似的去广告的脚本,copy过来,发现还不够精简,于是又去掉了感觉自己基本上不会用的东西,比如说分组什么的.
改着改着,结果一发不可收拾了,看见哪里不顺眼就想把它改掉.于是继续动刀子,修了两个圆角出来.如下图:

细心的盆友会发现,输入框上面发生了小小的变化,左边变成了”Hallelujah!”,而右边的”请文明发言”也不见了- -,要实现这个效果,光光依靠修改css就比较麻烦了,于是介绍第二件神器–tampermonkey,这家伙让我又花了整整一天去学习JQuery.
发现这种好东西后不再多改点东西作为处女座偏执狂完美主义者是不会善罢甘休的,想起来一打开新浪就是五彩缤纷的图片,我怎么都忍不住不把它弄掉.可是直接去掉图片的话简直弱爆了,用这种神器去做这么低级的事情,我自己都会看不起自己的.于是我想了一个觉得比较靠谱的方法,把缩略小图的尺寸变小,降低透明度,然后加上阴影,这样看起来比较清爽,同时阴影的存在也可以让我看见那儿有个图片哟,当鼠标进入图片周围区域时,自动扩展为中等缩略图.(这里说一下,新浪有三种大小格式的图,小的缩略图,中等的缩略图,和原大小的大图).还有我把视频分享的缩略图也去掉了,因为貌似每个视频分享正文里都有视频图标?
效果如下图:


我直接取消了那个点开的操作,所以也把查看大图,左转右转什么的也没了.本来以为没什么大问题的,可是当我在浏览一些压缩幅度比较大的图片,比如一些文章截图,就发现还是需要原尺寸大图的支持.而从中等缩略图得到大图的URL非常直接,只要中间目录改成large就好了,一开始,我改成了点击直接显示原尺寸大图,这对于一些比屏幕小的图片来说,还是合适的,可以…..还是那些超出屏幕范围的图片,让我又花了差不多一天的时间.
后来采用的方法是在中等缩略图边上显示zoom out的部分…(表达不清楚,看图好了).为了完全集成进tampermonkey,我尽量找一些比较精简的JQuery Plugin, 找啊找啊,终于找到一个短的又比较漂亮的,叫Cloud Zoom V1.0.2,很不错, 感谢作者R Cecco.
调试还真不是件容易的事,尤其对JQuery非常不熟,几乎用到个函数就得去google,所幸的是,不用担心重置,要是在国内…会疯掉的吧.
Debug的时间过得实在是太快了,快到来不及做饭,于是今天又吃了一天的李锦记豆豉酱意大利面…
下面是效果图,分别是正常图片和那种会超出屏幕范围的图片:

大概就是这样了,下面说安装方法.
用到两个chrome插件,上面说了,链接分别是:
1. Stylish
2. Tampermonkey
两个脚本文件,分别扔第一个和第二个,
CSS的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
 
 
@-moz-document domain('weibo.com'), url-prefix('http://weibo.com') {
 
	/* 
 
		the code in here only apply to:
 
			-pages on the domain weibo.com
 
			-pages whose URLs start with http://weibo.com
 
	*/
 
}
 
 
 
/*主体透明*/
 
 
 
/*新浪认证*/
 
.W_sina_vip { display:none !important; }
 
/*微博相册*/
 
#pl_content_album { display:none !important; }
 
/*加关注推荐层*/
 
div[node-type="suggestedFollows"] { display:none !important; }
 
/*顶部左侧导航条*/
 
li[node-type="plaza"] { display: none !important; }
 
li[node-type="group"] { display: none !important; }
 
li[node-type="app"] { display: none !important; }
 
li[node-type="game"] { display: none !important; }
 
/*首页左侧面板话题*/
 
div[node-type="recommendTopic"] { display: none !important; }
 
/*新版首页左侧边栏*/
 
#pl_leftNav_app { display: none !important; }
 
a[href="http://photo.weibo.com?leftnav&wvr=4"]{ display: none !important; }
 
a[href="http://music.weibo.com?leftnav&wvr=4"]{ display: none !important; }
 
a[href="http://event.weibo.com?leftnav&wvr=4"]{ display: none !important; }
 
a[href="http://vote.weibo.com?leftnav&wvr=4"]{ display: none !important; }
 
a[href="/jx/pic.php?leftnav&wvr=4"]{ display: none !important; }
 
a[href="/pub/top?leftnav&wvr=4"]{ display: none !important; }
 
a[action-type="more"]{ display: none !important; }
 
/*新版首页右侧边栏*/
 
#pl_content_userTips { display: none !important; }
 
/*新版用户微博页*/
 
#pl_leftNav_profileContent { display: none !important; }
 
#pl_relation_hisFollowingsNav { display: none !important; }
 
/*评论页面热门评论*/
 
#pl_content_commentTopNav { display: none !important; }
 
/*收藏页面最多收藏*/
 
#pl_content_favoritesTopNav { display: none !important; }
 
/*勋章*/
 
div[node-type="medal"] { display: none !important; }
 
#pl_content_medal { display: none !important; }
 
/*热门话题*/
 
#pl_content_promotetopic { display:none !important; }
 
/*可能感兴趣的人*/
 
 
/*关注的话题*/
 
 
/*人气用户*/
 
#pl_relation_recommendPopularUsers { display:none !important; }
 
/*我加入的群*/
 
div[name="app10003"] { display:none !important; }
 
/*手机玩转新浪微博 新浪微博意见信箱*/
 
#pl_common_help { display:none !important; }
 
#pl_common_feedback { display:none !important; }
 
/*不良信息曝光*/
 
#pl_common_reportentry { display:none !important; }
 
/*可能感兴趣的应用*/
 
#pl_content_allInOne { display:none !important; }
 
/*广告*/
 
#ads_47 { display:none !important; }
 
#ads_37 { display:none !important; }
 
#ads_36 { display:none !important; }
 
#ads_35 { display: none !important; }
 
/*公告栏*/
#pl_common_noticeboard{display:none !important;}
 
/*底部通知*/
#wbim_box{display:none !important;}
 
/*底部模块*/
 
#ads_bottom_1 { display:none !important; }
 
#pl_ad_backFill { display:none !important; }
 
.global_footer { display:none !important; }
 
/* 自己首页圆角左边 */
#pl_content_hisPersonalInfo .perAll_info {
-moz-border-radius-topleft: 10px !important;
-moz-border-radius-topright: 0px !important;
-moz-border-radius-bottomright: 0px !important;
-moz-border-radius-bottomleft: 0px !important;
-webkit-border-radius: 10px 0px 0px 0px !important;
border-radius: 10px 0px 0px 0px !important;
}
/* 他人首页圆角左边 */
#pl_content_publisherTop{
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 0px 0px 0px;
}
.W_main_c{-webkit-border-radius: 10px 0px 0px 0px;}
/*圆角*/
.W_main_narrow_bg {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
}
/*设置皮肤按钮*/
#pl_content_setskin{
display:none !important;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
}
/*新浪原版输入框title*/
#pl_content_publisherTop .title{
font-size:24px;
color:#5C5C5C;
font-weight:bold;
text-shadow: 1px 1px 1px ##ffffff;
filter: dropshadow(color=##ffffff, offx=2, offy=2);
background:transparent !important;
}
/*新浪原版输入框字数显示*/
div[node-type="num"]{
display:none !important;
font-size:14px;
color:#333333;
font-weight:bold;
text-shadow: 1px 1px 1px ##ffffff;
filter: dropshadow(color=##ffffff, offx=1, offy=1);
}
/*举报与黑名单*/
#pl_content_hisOperationPlate{display:none !important;}
/*全部微博;我的味群...*/
.nfTagB_group{
display:none !important;
}
/**/
.left_nav{
display:none !important;
}
/*他人页面微博分类*/
.minifTagB {
display:none !important;
}
/*自己首页微博分类*/
ul[node-type="feedGroup"]{
display:none !important;
}
/*自己首页更多分类*/
.interOder {
display:none !important;
}
/*分组块背景色,协调用*/
div[node-type="groupList"]{
background:transparent;
}
/*缩略图操作*/
.comment:hover .piclist img{
opacity:1;
max-height:100000px;
max-width:1900px;
-webkit-transform-origin: center;
-webkit-box-shadow: 5px 5px 5px #888;
}
.piclist:hover img{
opacity:1;
max-height:100000px;
max-width:1900px;
-webkit-transform-origin: center;
-webkit-box-shadow: 5px 5px 5px #888;
}
.piclist li img{
opacity:0.1;
max-height:32px;
max-width:32px;
-webkit-box-shadow: 3px 3px 3px #000000;
-moz-box-shadow: 3px 3px 3px #000000;
box-shadow: 3px 3px 3px #000000;
-webkit-transition: all 1s ease-in-out;
}
W_no_border{display:none !important;}
 
/*广告*/
#pl_content_pullylist{display:none !important;}
/*不显示视频缩略图*/
li[action-type="feed_list_media_video"]{display:none !important;}
 
/*popup 用*/
#backgroundPopup{  
display:none;  
position:fixed;  
height:100%;  
width:100%;  
top:0;  
left:0;  
background:#000000;  
border:1px solid #cecece;  
z-index:1 !important;  
}  
#imgback{
display:none; 
z-index:2;
position:fixed;  
height:100%;  
width:100%;  
top:0;  
left:0;  
 
 
}
#largeimage{
max-height:900px;
}
#abc{
 
display:none;  
position:relative;
top:50%;
left:50%;
 
 
z-index:2 !important;  
 
}
 
#largeimg2{
z-index:-1;
visibility:hidden;
}
 
 
/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
	border: 4px solid #888;
	margin:-4px;	/* Set this to minus the border thickness. */
	background-color:#fff;	
	cursor:move;		
}
 
/* This is for the title text. */
.cloud-zoom-title {
	font-family:Arial, Helvetica, sans-serif;
	position:absolute !important;
	background-color:#000;
	color:#fff;
	padding:3px;
	width:100%;
	text-align:center;	
	font-weight:bold;
	font-size:10px;
	top:0px;
}
 
/* This is the zoom window. */
.cloud-zoom-big {
	border:4px solid #ccc;
	overflow:hidden;
}
 
/* This is the loading message. */
.cloud-zoom-loading {
margin-left:auto;
margin-right:auto;
text-align:center;
position:absolute !important;
	color:white;	
	background:#222;
	padding:3px;
	border:1px solid #000;
}

JQuery的:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
// ==UserScript==
// @name	   Userscript for t.sina
// @require	http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// @namespace  http://use.i.E.your.homepage/
// @version	0.3
// @description  enter something useful
// @include	http://*weibo.com/*
// @licence	MIT
// @author	ganlu
// ==/UserScript==
//////////////////////////////////////////////////////////////////////////////////
// Cloud Zoom V1.0.2
// (c) 2010 by R Cecco. <http://www.professorcloud.com>
// MIT License
//
// Please retain this copyright header in all versions of the software
//////////////////////////////////////////////////////////////////////////////////
var $ = jQuery;
 
(function ($) {
 
 
 
	function format(str) {
		for (var i = 1; i < arguments.length; i++) {
			str = str.replace('%' + (i - 1), arguments[i]);
		}
		return str;
	}
 
	function CloudZoom(jWin, opts) {
 
		var sImg = $('img', jWin);
		var	img1;
		var	img2;
		var zoomDiv = null;
		var	$mouseTrap = null;
		var	lens = null;
		var	$tint = null;
		var	softFocus = null;
		var	$ie6Fix = null;
		var	zoomImage;
		var controlTimer = 0;
		var cw, ch;
		var destU = 0;
		var	destV = 0;
		var currV = 0;
		var currU = 0;
		var filesLoaded = 0;
		var mx,
			my;
		var ctx = this, zw;
		// Display an image loading message. This message gets deleted when the images have loaded and the zoom init function is called.
		// We add a small delay before the message is displayed to avoid the message flicking on then off again virtually immediately if the
		// images load really fast, e.g. from the cache.
		//var	ctx = this;
		setTimeout(function () {
			//						 <img src="/images/loading.gif"/>
			if ($mouseTrap === null) {
				var w = jWin.width();
				jWin.parent().append(format('<div style="width:%0px;position:absolute;top:75%;left:%1px;text-align:center" class="cloud-zoom-loading" >Loading...</div>', w / 3, (w / 2) - (w / 6))).find(':last').css('opacity', 0.5);
			}
		}, 200);
 
 
		var ie6FixRemove = function () {
 
			if ($ie6Fix !== null) {
				$ie6Fix.remove();
				$ie6Fix = null;
			}
		};
 
		// Removes cursor, tint layer, blur layer etc.
		this.removeBits = function () {
			//$mouseTrap.unbind();
			if (lens) {
				lens.remove();
				lens = null;
			}
			if ($tint) {
				$tint.remove();
				$tint = null;
			}
			if (softFocus) {
				softFocus.remove();
				softFocus = null;
			}
			ie6FixRemove();
 
			$('.cloud-zoom-loading', jWin.parent()).remove();
		};
 
 
		this.destroy = function () {
			jWin.data('zoom', null);
 
			if ($mouseTrap) {
				$mouseTrap.unbind();
				$mouseTrap.remove();
				$mouseTrap = null;
			}
			if (zoomDiv) {
				zoomDiv.remove();
				zoomDiv = null;
			}
			//ie6FixRemove();
			this.removeBits();
			// DON'T FORGET TO REMOVE JQUERY 'DATA' VALUES
		};
 
 
		// This is called when the zoom window has faded out so it can be removed.
		this.fadedOut = function () {
 
			if (zoomDiv) {
				zoomDiv.remove();
				zoomDiv = null;
			}
			this.removeBits();
			//ie6FixRemove();
		};
 
		this.controlLoop = function () {
			if (lens) {
				var x = (mx - sImg.offset().left - (cw * 0.5)) >> 0;
				var y = (my - sImg.offset().top - (ch * 0.5)) >> 0;
 
				if (x < 0) {
					x = 0;
				}
				else if (x > (sImg.outerWidth() - cw)) {
					x = (sImg.outerWidth() - cw);
				}
				if (y < 0) {
					y = 0;
				}
				else if (y > (sImg.outerHeight() - ch)) {
					y = (sImg.outerHeight() - ch);
				}
 
				lens.css({
left: x,
top: y
				});
				lens.css('background-position', (-x) + 'px ' + (-y) + 'px');
 
				destU = (((x) / sImg.outerWidth()) * zoomImage.width) >> 0;
				destV = (((y) / sImg.outerHeight()) * zoomImage.height) >> 0;
				currU += (destU - currU) / opts.smoothMove;
				currV += (destV - currV) / opts.smoothMove;
 
				zoomDiv.css('background-position', (-(currU >> 0) + 'px ') + (-(currV >> 0) + 'px'));
			}
			controlTimer = setTimeout(function () {
				ctx.controlLoop();
			}, 30);
		};
 
		this.init2 = function (img, id) {
 
			filesLoaded++;
			//console.log(img.src + ' ' + id + ' ' + img.width);
			if (id === 1) {
				zoomImage = img;
			}
			//this.images[id] = img;
			if (filesLoaded === 2) {
				this.init();
			}
		};
 
		/* Init function start.  */
		this.init = function () {
			// Remove loading message (if present);
			$('.cloud-zoom-loading', jWin.parent()).remove();
 
 
			/* Add a box (mouseTrap) over the small image to trap mouse events.
			It has priority over zoom window to avoid issues with inner zoom.
			We need the dummy background image as IE does not trap mouse events on
			transparent parts of a div.
			*/
			$mouseTrap = jWin.parent().append(format("<div class='mousetrap' style='background-image:url(\".\");z-index:999;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;\'></div>", sImg.outerWidth(), sImg.outerHeight(), 0, 0)).find(':last');
 
			//////////////////////////////////////////////////////////////////////
			/* Do as little as possible in mousemove event to prevent slowdown. */
			$mouseTrap.bind('mousemove', this, function (event) {
				// Just update the mouse position
				mx = event.pageX;
				my = event.pageY;
			});
			//////////////////////////////////////////////////////////////////////
			$mouseTrap.bind('mouseleave', this, function (event) {
				clearTimeout(controlTimer);
				//event.data.removeBits();
				if(lens) { lens.fadeOut(299); }
				if($tint) { $tint.fadeOut(299); }
				if(softFocus) { softFocus.fadeOut(299); }
				zoomDiv.fadeOut(300, function () {
					ctx.fadedOut();
				});
				return false;
			});
			//////////////////////////////////////////////////////////////////////
			$mouseTrap.bind('mouseenter', this, function (event) {
				mx = event.pageX;
				my = event.pageY;
				zw = event.data;
				if (zoomDiv) {
					zoomDiv.stop(true, false);
					zoomDiv.remove();
				}
 
				var xPos = opts.adjustX,
					yPos = opts.adjustY;
 
				var siw = sImg.outerWidth();
				var sih = sImg.outerHeight();
 
				var w = opts.zoomWidth;
				var h = opts.zoomHeight;
				if (opts.zoomWidth == 'auto') {
					w = siw;
				}
				if (opts.zoomHeight == 'auto') {
					h = sih;
				}
				//$('#info').text( xPos + ' ' + yPos + ' ' + siw + ' ' + sih );
				var appendTo = jWin.parent(); // attach to the wrapper
				switch (opts.position) {
				case 'top':
					yPos -= h; // + opts.adjustY;
					break;
				case 'right':
					xPos += siw; // + opts.adjustX;
					break;
				case 'bottom':
					yPos += sih; // + opts.adjustY;
					break;
				case 'left':
					xPos -= w; // + opts.adjustX;
					break;
				case 'inside':
					w = siw;
					h = sih;
					break;
					// All other values, try and find an id in the dom to attach to.
				default:
					appendTo = $('#' + opts.position);
					// If dom element doesn't exit, just use 'right' position as default.
					if (!appendTo.length) {
						appendTo = jWin;
						xPos += siw; //+ opts.adjustX;
						yPos += sih; // + opts.adjustY;
					} else {
						w = appendTo.innerWidth();
						h = appendTo.innerHeight();
					}
				}
 
				zoomDiv = appendTo.append(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>', xPos, yPos, w, h, zoomImage.src)).find(':last');
 
				// Add the title from title tag.
				if (sImg.attr('title') && opts.showTitle) {
					zoomDiv.append(format('<div class="cloud-zoom-title">%0</div>', sImg.attr('title'))).find(':last').css('opacity', opts.titleOpacity);
				}
 
				// Fix ie6 select elements wrong z-index bug. Placing an iFrame over the select element solves the issue...
				if ($.browser.msie && $.browser.version < 7) {
					$ie6Fix = $('<iframe frameborder="0" src="#"></iframe>').css({
position: "absolute",
left: xPos,
top: yPos,
zIndex: 99,
width: w,
height: h
					}).insertBefore(zoomDiv);
				}
 
				zoomDiv.fadeIn(500);
 
				if (lens) {
					lens.remove();
					lens = null;
				} /* Work out size of cursor */
				cw = (sImg.outerWidth() / zoomImage.width) * zoomDiv.width();
				ch = (sImg.outerHeight() / zoomImage.height) * zoomDiv.height();
 
				// Attach mouse, initially invisible to prevent first frame glitch
				lens = jWin.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>", cw, ch)).find(':last');
 
				$mouseTrap.css('cursor', lens.css('cursor'));
 
				var noTrans = false;
 
				// Init tint layer if needed. (Not relevant if using inside mode)
				if (opts.tint) {
					lens.css('background', 'url("' + sImg.attr('src') + '")');
					$tint = jWin.append(format('<div style="display:none;position:absolute; left:0px; top:0px; width:%0px; height:%1px; background-color:%2;" />', sImg.outerWidth(), sImg.outerHeight(), opts.tint)).find(':last');
					$tint.css('opacity', opts.tintOpacity);
					noTrans = true;
					$tint.fadeIn(500);
 
				}
				if (opts.softFocus) {
					lens.css('background', 'url("' + sImg.attr('src') + '")');
					softFocus = jWin.append(format('<div style="position:absolute;display:none;top:2px; left:2px; width:%0px; height:%1px;" />', sImg.outerWidth() - 2, sImg.outerHeight() - 2, opts.tint)).find(':last');
					softFocus.css('background', 'url("' + sImg.attr('src') + '")');
					softFocus.css('opacity', 0.5);
					noTrans = true;
					softFocus.fadeIn(500);
				}
 
				if (!noTrans) {
					lens.css('opacity', opts.lensOpacity);
				}
				if ( opts.position !== 'inside' ) { lens.fadeIn(500); }
 
				// Start processing.
				zw.controlLoop();
 
				return; // Don't return false here otherwise opera will not detect change of the mouse pointer type.
			});
		};
 
		img1 = new Image();
		$(img1).load(function () {
			ctx.init2(this, 0);
		});
		img1.src = sImg.attr('src');
 
		img2 = new Image();
		$(img2).load(function () {
			ctx.init2(this, 1);
		});
		img2.src = jWin.attr('hrefs');
	}
 
	$.fn.CloudZoom = function (options) {
		// IE6 background image flicker fix
		try {
			document.execCommand("BackgroundImageCache", false, true);
		} catch (e) {}
 
		this.each(function () {
			var	relOpts, opts;
			// Hmm...eval...slap on wrist.
			eval('var	a = {' + $(this).attr('rel') + '}');
			relOpts = a;
 
 
			if ($(this).is('.cloud-zoom')) {
				$(this).css({
					'position': 'relative',
						'display': 'block'
				});
				$('img', $(this)).css({
					'display': 'block'
				});
				// Wrap an outer div around the link so we can attach things without them becoming part of the link.
				// But not if wrap already exists.
				if ($(this).parent().attr('id') != 'wrap') {
					$(this).wrap('<div id="wrap" style="top:0px;z-index:9999;position:relative;"></div>');
				}
				opts = $.extend({}, $.fn.CloudZoom.defaults, options);
				opts = $.extend({}, opts, relOpts);
 
				$(this).data('zoom', new CloudZoom($(this), opts));
 
			} else{
 
				opts = $.extend({}, relOpts, options);
				$(this).data('relOpts', opts);
				$(this).bind('click', $(this), function (event) {
 
					var data = event.data.data('relOpts');
					// Destroy the previous zoom
					$('#' + data.useZoom).data('zoom').destroy();
					// Change the biglink to point to the new big image.
					$('#' + data.useZoom).attr('hrefs', event.data.attr('hrefs'));
					// Init a new zoom with the new images.
					$('#' + event.data.data('relOpts').useZoom).CloudZoom();
					return false;
				});
			}
		});
 
		return this;
	};
 
	$.fn.CloudZoom.defaults = {
zoomWidth: 'auto',
zoomHeight: 'auto',
position: 'right',
tint: false,
tintOpacity: 0.5,
lensOpacity: 0.5,
softFocus: false,
smoothMove: 3,
showTitle: true,
titleOpacity: 0.5,
adjustX: 0,
adjustY: 0
	};
 
})(jQuery);
 
 
$(document).ready(function() {
	// do stuff when DOM is ready
	var obj = $('.send_weibo');
	// alert(obj.html());
	if (obj.html() != null){
 
		$('.send_weibo .title').html('Hallelujah!');
		var str = $('.send_weibo .num').html();
		str = str.replace( /[^0-9]/g ,'');
 
		$('<div class="num"><span>'+str+'</span></div>').appendTo($('.send_weibo'));
	}
 
 
	$('<div id="backgroundPopup"></div>').appendTo($('.W_miniblog'));
	$("<div id=\"imgback\"><div id='abc'><a id='zoom1' hrefs=''  class='cloud-zoom' size=\"zoomWidth:'100',zoomHeight:'100'\"  rel=\"smoothMove:2 ,adjustX: 10, adjustY:-4 \"><img  id='largeimage'  /></a></div></div>").appendTo($('.W_miniblog'));
 
        $('.chePicMin.W_bgcolor_mini.bigcursor').each(function()
        {
            $(this).removeClass('chePicMin W_bgcolor_mini bigcursor');
        });
 
 
	$('.bigcursor').each(function(){
		var str = $(this).attr('src');
 
		str = str.replace('thumbnail' , 'bmiddle');
 
		$(this).attr('src' , str);
		$(this).attr('action-type' , '');
		$(this).attr('rel' , "useZoom: 'zoom1'");
 
	});
 
	$('.bigcursor').click(function(){
		var str =  $(this).attr('src');
		var old = str;
		str = str.replace('bmiddle' , 'large');
		var w = $(this).width();
		var h = $(this).height();
		if (h > 900)h = 900;
 
 
		var zw = w < h ? w : h;
 
		$('#zoom1').attr('hrefs' , str);
 
		$('#zoom1').attr('rel' , "smoothMove:2 ,adjustX: 10, adjustY:-4 , zoomWidth:"+zw+",zoomHeight:"+zw);
 
		if ($('#largeimage').attr('src') != old){
 
			$('#largeimage').attr('src' , old).load(function(){
				$('#abc').css('margin-left' , -w/2);
				$('#abc').css('margin-top' , -h/2);
				$('#imgback').css('display' , 'block');
				$('#abc').css('display' , 'block');
				$("#backgroundPopup").css({ "opacity": "0.7"  });
				$("#backgroundPopup").fadeIn("slow");
				$('#largeimg').fadeIn("slow");
			});
		}
		else{
 
			$('#abc').css('margin-left' , -w/2);
			$('#abc').css('margin-top' , -h/2);
 
			$('#imgback').css('display' , 'block');
			$('#abc').css('display' , 'block');
 
 
			$("#backgroundPopup").css({ "opacity": "0.7"  });
			$("#backgroundPopup").fadeIn("slow");
			$('#largeimg').fadeIn("slow");
		}
 
 
	});
	$('#imgback').click(function(){
 
		$("#backgroundPopup").fadeOut("slow");
		$('#imgback').fadeOut("slow");
		$('#largeimg').fadeOut("slow");
		$('#zoom1').attr('hrefs' , '');
		$('#largeimage').attr('src' , '');
 
	});
 
 
	$('<img id="largeimg2" />').appendTo($('.W_miniblog'));
 
	$('.cloud-zoom').CloudZoom();
	$('.bigcursor').CloudZoom();
 
 
 
});
 
 
 
 
$(document).bind("DOMNodeInserted" ,function(){
 
	if ($(event.target).hasClass('feed_list')){
 
                 $('.chePicMin.W_bgcolor_mini.bigcursor').each(function()
                 {
                     $(this).removeClass('chePicMin W_bgcolor_mini bigcursor');
                 });
 
		$(event.target).find('.bigcursor').each(function(){
			var str = $(this).attr('src');
			str = str.replace('thumbnail' , 'bmiddle');
 
			$(this).attr('src' , str);
			$(this).attr('action-type' , '');
			$(this).attr('rel' , "useZoom: 'zoom1'");
 
		});
 
		$(event.target).find('.bigcursor').click(function(){
			var str =  $(this).attr('src');
			var old = str;
			str = str.replace('bmiddle' , 'large');
			var w = $(this).width();
			var h = $(this).height();
			if (h > 900)h = 900;
			var zw = w < h ? w : h;
			$('#zoom1').attr('rel' , "smoothMove:2 ,adjustX: 10, adjustY:-4 , zoomWidth:"+zw+",zoomHeight:"+zw);
 
			$('#zoom1').attr('hrefs' , str);
 
 
			if ($('#largeimage').attr('src') != old){
 
				$('#largeimage').attr('src' , old).load(function(){
					$('#abc').css('margin-left' , -w/2);
					$('#abc').css('margin-top' , -h/2);
					$('#imgback').css('display' , 'block');
					$('#abc').css('display' , 'block');
					$("#backgroundPopup").css({ "opacity": "0.7"  });
					$("#backgroundPopup").fadeIn("slow");
					$('#largeimg').fadeIn("slow");
				});
			}
			else{
 
				$('#abc').css('margin-left' , -w/2);
				$('#abc').css('margin-top' , -h/2);
 
				$('#imgback').css('display' , 'block');
				$('#abc').css('display' , 'block');
 
 
				$("#backgroundPopup").css({ "opacity": "0.7"  });
				$("#backgroundPopup").fadeIn("slow");
				$('#largeimg').fadeIn("slow");
			}
 
 
		});
 
		$(event.target).find('.bigcursor').CloudZoom();
	}
 
 
});
 
 
$('textarea').live('keyup blur', function() {
	var str = $('.send_weibo .num').html();
	str = str.replace( /[^0-9]/g ,'');
	$('.num').html('<span>'+str+'</span>');
});

由于对JQuery非常不熟悉,代码写得极其挫,感觉有不少废操作,但是用着感觉还行…
暂时歇手,开始准备下周一的面试.

感谢主!哈里路亚!

2 thoughts on “精简新浪微博界面

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)
为了防止机器人垃圾评论,需要填写下面的罗马数字,我已经准备好了,1-10的罗马数字,够用了.
1-i , 2-ii , 3-iii , 4-iv , 5-v , 6-vi , 7-vii , 8-viii , 9-ix , 10-x

2 + 2 = ?
Please leave these two fields as-is: