Tag Archives: jquery

偷来的漂亮css3导航菜单的正确打开方式

菜单的源:
首先说明一下css3中-webkit-transform中translate()方法。
CSSMatrix translate(x, y);
x, y都是相对位移。相对谁的位移呢?没错,相对这个元素在页面加载完成的那一刻,该元素的位移。

比如说,某元素在以浏览器左上角为原点的坐标为(100, 100)。
来一个translate(100, 0) (当然地,这里用jquery的css()方法,下同)它就跑到(200, 100)去了。
接着来一次translate(-100, 0),他就跑到(0, 100)去了。
如果想复位,执行translate(0, 0)即可。

接着来说那段坑爹的js。原始代码带上注释如下:
Continue reading

简单的chrome扩展,用于弄掉twitter官网的t.co

需要文件:
1.本体:manifest.json

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "TwiHelper",
  "version": "1.0.1",
  "description": "Double click the text -> Get ID; Expand t.co",
  "content_scripts": [
    {
      "matches": ["https://*.twitter.com/*", "http://*.twitter.com/*"],
      "js": ["jquery.js", "my.js"]
    }
  ]
}

2.jquery.js(这个不多说了)
3.真·本体:my.js

1
2
3
4
5
6
7
8
9
10
setTimeout(function () {
		$("a[data-expanded-url]").attr("href", function () {
				return this.getAttribute("title");
			});
	}, 2000);
setTimeout(function () {
		$("div.tweet-content").dblclick(function () {
				prompt(0, this.parentElement.getAttribute("data-item-id"));
			});
	}, 2000);

之所以不用

1
$().ready(function(){//put some code here})

是因为双击每一个tweet-item获取id号 这个功能无法实现(我也不知道为啥)

缺点:很明显的。。。没有判断刷新机制。。。于是你把窗口拉到最下面,刷出来的带链接推依然有t.co。官网窗口按“.”展开的new items同理。哪位大大能教下俺<(=>_<=)>

用kibo.js实现网页中类似vim的jk导航效果

关于kibo.js的文档,请移步:

一直很不爽facebook没有jk nav,所以自己动手写了一个。当然,不仅仅是facebook,只要你愿意,可以实现任意网页上响应键盘上的j k shift+g来做到导航的效果。
直接上代码吧:

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
var k = new Kibo();
//此处选择作为nav anchors的元素
var anchors = $("li[class~='uiStreamStory']");
var index = 0;
var pos = $(anchors[index]).offset().top;
//j为向下
k.down(['j'], function () {
	index++;
	if (index >= anchors.length) {
		index = anchors.length - 1;
	}
	pos = $(anchors[index]).offset().top;
	$("html, body").animate({
			scrollTop : pos
		}, 100); //1秒钟
});
//k为向上
k.down(['k'], function () {
	index--;
	if (index < 0) {
		index = 0;
	}
	pos = $(anchors[index]).offset().top;
	$("html, body").animate({
			scrollTop : pos
		}, 100); //1秒钟
});
//shift+g到最底部
k.down(['shift g'], function () {
	index = anchors.length - 1;
	pos = $(anchors[index]).offset().top;
	$("html, body").animate({
		scrollTop : pos
	}, 100);
});
//gg到最顶部
var flag = 0;
k.down(['g'], function () {
	flag++;
	if (flag % 2 == 0) {
		index = 0;
		pos = $(anchors[index]).offset().top;
		$("html, body").animate({
			scrollTop : pos
		}, 100);
	}
});

当然bug也是很严重的。gg和shift+g的冲突问题什么的……(捂脸