吴锴的博客

提示框效果（tooltip）是常见的网页特效，它的功能是当用户将指针放置在控件上时为用户显示提示信息。

实现原理

我们将需要显示提示框的部分称为：tooltip 超链接。

当鼠标移动到 tooltip 超链接上时，首先判断是否存在与之对应的提示框元素，如果存在就将其显示；不存在的话就用JavaScript代码创建一个新的 DOM 元素，然后将新建的 DOM 元素附在原来的 tooltip 超链接元素后面。

每个ToolTip提示框都是一个 div 元素，新建 DOM 元素的格式是类似这样的：

1

<div class="tooltip" id="xx"> xxxxxx </div>

这里将用到两个函数：

1
2

document.createElement();   // 创建一个 HTML 元素
.appendChild();     // 添加元素

这是学习了慕课网教程后的学习笔记，最终结果如下：GitHub链接

分析界面结构

因为我们需要实现的是登录浮层，所以为了方便起见，直接将网页的其余部分作为一张背景图片展现出来。

整个登录对话框（dialog）分为两个大的部分，上部的标题（dialogTitle）和下部的内容部分（dialogContent）。当我们点击在标题部分时，将会触发相应的拖拽效果。

最近在试着用Three.js做一个简单的赛车游戏，里面有一个需要解决的问题是如何判断两个物体发生了碰撞，比如赛车是否碰上了障碍物或者获得了奖励物品。

示例

我找了一些资料，发现了两个示例程序：第一个示例、第二个示例。

以上两个程序都是用THREE.Raycaster类来解决问题的。

Raycaster类

Raycaster应该翻译为“光线投射”，顾名思义，就是投射出去的一束光线。

Raycaster的构造函数如下

Raycaster( origin, direction, near, far ) {

origin — 射线的起点向量。
direction — 射线的方向向量，应该归一化。
near — 所有返回的结果应该比 near 远。Near不能为负，默认值为0。
far — 所有返回的结果应该比 far 近。Far 不能小于 near，默认值为无穷大。

Three.js是一个很流行的3D JavaScript库。这里有一个three.js的入门教程，在浏览器窗口中画出星空。我按照教程重新实现了一遍，这里的这篇博客把教程大致翻译了一遍。我的demo。

变量

定义全局变量：

1
2
3
4
5
6
7
8
9
10
11

// three.js的主要部分
var camera, scene, renderer,

// 跟踪鼠标位置
mouseX = 0, mouseY = 0,

// 一个数组，用于存储我们的粒子
particles = [];

// 初始化
init();

CSS3提供了一些绘图和动画的功能，我们可以纯粹利用CSS3来画出一个在屏幕上旋转的立方体，demo戳这里。

立方体是由六个面组成的，每个面都是一个<div>元素。我们需要对每个面进行位置和方向的调整，才能组合显示成一个立方体。先来看看CSS3中使用的三维坐标系。

三维坐标系

这里的坐标系与立体几何中的坐标系有所不同。上图中，由左至右为x轴的正方向，而Y轴则是由上至下，Z轴由屏幕内指向屏幕外。

transform属性

transform属性用于向元素应用2D或3D转换，在绘制立方体的过程中用到了旋转和平移这两种。

平移

1
2
3

translateX(200px);    /*向X轴的正方向平移200像素，即从左向右移动*/
translateY(200px);    /*向Y轴的正方向平移200像素，即从上向下移动*/
translateZ(200px);    /*向Z轴的正方向平移200像素，即从屏幕内向外移动*/

Markdown用法

最初编辑时间：2015/3/22

参考网址：

Markdown——入门指南

Markdown中文维基百科

Markdown语法说明

Markdown 是一种用来写作的轻量级「标记语言」，它用简洁的语法代替排版。

换行

在文本中输入的换行会从最终生成的结果中删除，浏览器会根据可用空间自动换行。如果想强迫换行，可以在行尾插入至少两个空格。

标题

在 Markdown 中，如果一段文字被定义为标题，只要在这段文字前加 # 号即可。

# 一级标题
## 二级标题
### 三级标题

以此类推，总共六级标题，建议在井号后加一个空格，这是最标准的 Markdown 语法。

zz85在这里用简单的代码就生成了一张随机的城市地图。生成地图与画一棵随机的树十分相似，都是先给出初始的元素，每个元素在满足条件时会生成新的子代，最后由所有的元素共同组成了我们想要的地图或树。

地图中的每一条道路对应程序中的一个Boid对象，Boid对象中用两个向量分别表示道路的起点和终点坐标。程序中的向量是使用 Three.js 这个库中的Vector2对象来表示的。

1
2
3

// 使用three.js中的向量来表示
this.start = new THREE.Vector2(x, y);
this.end = new THREE.Vector2(x, y);

Boid对象还有这些属性：

• x,y：道路上距离起点最远的坐标
• angle：道路的角度，会在其父代角度基础上偏转一个随机的角度
• distance：这条道路的长度
• dead：对象是否已经死亡

Boid还有一个update方法，它有如下的几个功能：

• 更新 x,y 坐标

1
2
3
4

this.distance += 2;
x = this.start.x + this.distance * this.dx;
y = this.start.y + this.distance * this.dy;
this.end.set(x, y);

看到这个网页中在canvas里绘制一棵树，感到很有趣，于是仿照他的源代码，同样也利用JavaScript生成了一棵树。

在程序中需要两个对象Branch, BranchCollection。Branch中存放当前正在绘制的这一段树枝的信息，BranchCollection中存放的是所有的树枝。

首先对canvas画布进行初始设置：

1
2
3
4
5

var width = window.innerWidth;
var height = window.innerHeight;
var canvas = document.getElementById("canvastree");
canvas.width = width;
canvas.height = height;

对初始的branch的数量、半径进行设置：

1
2
3
4

// 设置初始的数量
var n = 2 + Math.random() * 3;
// 设定初始的半径大小
var initialRadius = width / 50;

新建一个BranchCollection对象用于放置所有的branch：

1

branches = new BranchCollection();

这段时间看了一些爬虫的程序，因此想可以写一个程序来爬取煎蛋网的段子栏目，这样就可以直接在命令行下面看段子，还可以过滤掉一些质量低的段子。

我们的爬虫程序需要定义一个Spider_Modelclass作为程序的主体，类包含以下的几个函数：

1. __init__：一些变量的初始化。

2. GetPage：根据要求的URL链接提取所有的段子添加到列表中并且返回列表

3. LoadPage：如果当前已保存的页面小于2个，则调用GetPage获取新的页面

4. ShowPage：根据需要的格式显示段子内容、赞数、反对数

5. Start：程序从这里开始

煎蛋网段子的网址是以下这种形式的：

http://jandan.net/duan/page-328#comments

在程序中可以根据修改中间数字的而到达不同的页面。

为了能用Python来找出段子的位置，就要利用到正则表达式，在程序的开始要import re。首先查看一下网页源代码：

http://python.jobbole.com/81244/ http://www.pulpcode.cn/program-language/2014/12/23/python-encode/

str与字节码

1

s = "人生苦短"

s是个字符串，它本身存储的就是字节码。 （字节码（英语：Bytecode）通常指的是已经经过编译，但与特定机器码无关，需要直译器转译后才能成为机器码的中间代码。）

如果这段代码是在解释器上输入的，那么这个s的格式就是解释器的编码格式，对于windows的cmd而言，就是gbk。

如果将段代码是保存后才执行的，比如存储为utf-8，那么在解释器载入这段程序的时候，就会将s初始化为utf-8编码。