创建一个简单的帮助框(纯文字,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 命令

彩票项目结束,开始游戏之旅!

写写最近的心情吧!舒畅一点!

从去年2013年9月多入职UCWEB以来,一直参与研发的项目彩票项目(雀彩)被“完结”了。其实主要原因就是阿里巴巴收购ucweb以后,彩票业务也自然得到了整合,虽然现在还不知道雀彩品牌如何,但是我们的项目组就这么解散了,说好听点就是各自转岗在公司内部流动。

最近我去了游戏中心,参与SDK 客户端H5版本的开发,熟悉代码,熟悉流程,熟悉人,基本就这么开始了新的工作,后面会加入UC九游客户端的H5版本开发。

2013年到2014年我觉得真正是在一家大一点的互联网公司做了一个好的开端,这个是之前几份工作没有的,不管是待遇还是工作节奏还是工作周边的人和管理,其实说是我想要的不如说是我遇到的新的开始,2014年也过去一大半了,现在也加入了九游客户端H5组,虽然感觉紧张度从在雀彩的赶进度到半年KPI超过20%,到现在不过是来新的部门接手一些前辈的业务和代码。

我们在雀彩的前端团队基本就是各奔其他部门,有去了大导航,有去了游戏中心,包括我,真心希望大家能在新的部门都有新的发挥,我自己也得提点提点自己,自己的技术能力如果不加强,不能在团队做出突出表现,我觉得很难在游戏中心闪光,所以2014.9.1也算是一个更新的开始,不管是管理自己,还是从以后发展上来看,要坚持做一件事就要投入和深入。

从雀彩学好的敏捷开发流程,学到的开发节奏和好多同学的相互沟通相互交流。现在希望把自己放在一个低的位置从心出发重新来,25岁迈向26岁,马上又是中秋,吃月饼想家?还是继续前进,让自己更充实!

 

从心情层面上看,我觉得新的东西,好奇的东西就是应该来多点,结束旧的,一贯的开发模式,进入新阶段吧,放轻松,Begin。

读书研究技术,这些是必须的,更希望能多交流,多完善自己的不足,把知识留住在自身。