创建一个简单的帮助框(纯文字,HTML内嵌,带图片的~)

// html 效果
QQ图片20150111224932

<div class="help-tip">
	<p>这里是文字.</p>
</div>


// html

<div class="help-tip">
 <p>文字<br><br>
 <img src="balloon.jpg" width="300" />
 <br><a href="www.upour.com">链接</a>
</p>
</div>

// css
.help-tip{
	position: absolute;
	top: 18px;
	right: 18px;
	text-align: center;
	background-color: #BCDBEA;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 14px;
	line-height: 26px;
	cursor: default;
}

.help-tip:before{
	content:'?';
	font-weight: bold;
	color:#fff;
}

.help-tip:hover p{
	display:block;
	transform-origin: 100% 0%;

	-webkit-animation: fadeIn 0.3s ease-in-out;
	animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{	/* The tooltip */
	display: none;
	text-align: left;
	background-color: #1E2021;
	padding: 20px;
	width: 300px;
	position: absolute;
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	right: -4px;
	color: #FFF;
	font-size: 13px;
	line-height: 1.4;
}

.help-tip p:before{ 
	position: absolute;
	content: '';
	width:0;
	height: 0;
	border:6px solid transparent;
	border-bottom-color:#1E2021;
	right:10px;
	top:-12px;
}

.help-tip p:after{ 
	width:100%;
	height:40px;
	content:'';
	position: absolute;
	top:-40px;
	left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
	0% { 
		opacity:0; 
		transform: scale(0.6);
	}

	100% {
		opacity:100%;
		transform: scale(1);
	}
}

@keyframes fadeIn {
	0% { opacity:0; }
	100% { opacity:100%; }
}

1.1了解javascript函数调用和“this”

了解javascript函数调用和“this”

 

函数定义:
function hello(something) {
  console.log(this + " says hello " + something);
}
函数被调用:
hello.call("TinyBear", "world") //=> TinyBear says hello world
接着:
function hello(thing) {
  console.log("Hello " + thing);
}
 
// this:
hello("world")
hello.call(window, "world");

// 在严格模式下:
hello.call(undefined, "world");

// 函数自运行
(function() {})()
// 等价于:
(function() {}).call(window);


// 成员函数:
var person = {
  name: "TinyBear",
  hello: function(thing) {
    console.log(this + " says hello " + thing);
  }
}
 
// this:
// 打印输出: [object Object] says hello world
person.hello("world")
person.hello.call(person, "world");

// 如果改成先定义全局函数
function hello(thing) {
  console.log(this + " says hello " + thing);
}
 
person = { name: "TinyBear" }
person.hello = hello;
 
person.hello("world") 
person.hello.call(person, "world")
 
hello("world") // 输出: [object Window] says hello world 说明这里的this指向window

// 还可以这样 使用Function.prototype.bind
var person = {
  name: "TinyBear",
  hello: function(thing) {
    console.log(this.name + " says hello " + thing);
  }
}
 
var b = function(thing) { return person.hello.call(person, thing); }
 // 这里this指向对象本身 打印:TinyBear says hello world
b("world");
b.call(window, "world");

var bind = function(func, thisValue) {
  return function() {
    return func.apply(thisValue, arguments);
  }
}
 
var b = bind(person.hello, person);
b("world") // "TinyBear says hello world"

在 ES5 下:
var b = person.hello.bind(person);
b("world") // "TinyBear says hello world"
var person = {
  name: "TinyBear",
  hello: function() { console.log(this.name + " says hello world"); }
}
 
$("#div").click(person.hello.bind(person));

总是忘记 Vim 常用命令,得写个文章记录下。

  1. :e 文件名    =>  编辑 该文件
  2. :w => 写入即保存
  3. :wq => 写入并保存
  4. :q => 没有作任何修改,直接退出
  5. :q! => 退出不作任何保存.强退
  6. : x => 文件存在的情况下,写入并保存
  7. :sav 文件名 => 保存成某个文件名的文件
  8. . => 重复上次操作 (前面加数字 多次这样操作)
  9. k,j,b,e => 这些移动光标的东东
  10. $ =>光标移动到行尾
  11. 0 => 行首
  12. dd => 剪切
  13. yy =>复制整行
  14. D => 剪切到行尾
  15. /\c => 不区分大小写查找
  16. 搜索查找替换还有很多需要直接看文档的.
  17. :1,10 w 文件名 =>提取文件中1到10行到其他文件中
  18. :1,100 w >> 文件 => 追加到某个文件中
  19. :e . => 打开当前文件所在目录树
  20. :%!fmt => 对齐
  21. :tabnew => 新窗口打开tab
  22. :hide => 关闭当前窗口
  23. u => 撤销
  24. 更多直接看图吧!

    vim 命令

    vim 命令