github上的地址为 https://github.com/paperen/js-vim

实例地址为 http://paperen.com/demo/js-vim/

通过javascript在网页中重现vi的操作方式(基于jquery)

如何使用

1. 引入 core.js

   <script type="text/javascript" src="vim/core.js"></script>

2. 在想要实现vi操作的页面中加入

   <script>
   $(document).ready(function(){
    $(this).vim();
   });
   </script>
   

现有支持的命令

• r : 重新载入当前页面
• j : 向下滚动
• k : 向上滚动
• d : 向下滚动半页
• u : 向上滚动半页
• gg : 滚动到页面顶部
• G : 滚动到页面底部
• H : 后退
• L : 前进
• f : 打开当前页面上某个链接
• F : 在新标签页中打开当前页面上某个链接

有时候我们上线的网站可以要对第一次使用的用户进行一个引导，当然我们必须要建立帮助中心，也要附带一些图文说明指引用户进一步操作，而有时候也会使用一些更让人舒服的指引方法，使用一个偏暗遮罩将页面的元素挡住，然后将设定好的操作步骤一步一步加亮强调，从而引导用户去操作并附带一些说明文字与图片，这种方式不会影响太多用户体验，很简洁地引导了用户如何使用应用。

越来越觉得在网站开发中，前端的效果最不能忽视，包括用户体验与交互效果，当然还有CSS等等，刚看完了一本叫《Don't make me think》的书，说的是关于WEB用户体验等方面的东西，我们如何选择首页的说明文字，如何让浏览者不会在你的网站中迷失，如何让浏览者迅速了解你的网站，原来都是很有学问的~~总之也不简单，慢慢领会吧。

paperen也很久没发东西了，趁着有空，做了个图片展览的东西，还勉强过得去吧。

Paperen对于js了解的确实不多，以前一向就是写一些简单的功能，例如检验输入非空还有地址返回的功能还有用js控制一下样式之类的，之后直接接触JQuery，用JQuery集成的效果只需要一两行的代码，但是如果不用JQuery的框架去写js代码的话可能没有一百多行都写不出来，感觉用JQuery是方便多了，但是Paperen有空的时候也还是要去认真学习一下JavaScript的，还有prototype这个框架。?

前言就说一下自己对于js的体会吧，前些时间趁自己有空用jquery做了一个切换图片的小玩意，简单到不能再简单的东西。?

http://paperen.com/demo/js-change-pic/

自从接触了markdown就迷上了它，就希望连word文档都可以使用markdown来编写。看一两遍markdown的语法说明（中文版）基本就能上手了，简单快捷

paperen想将自己博客的编辑器也改造成markdown的，于是乎利用工作休息与空闲的时间在git上找了个php markdown解析引擎，然后再补充一下代码就完成了一个简单的markdown editor

演示地址 http://paperen.com/demo/markdowneditor/

git地址 https://github.com/paperen/markdowneditor

markdowneditor

一个简单的markdown编辑器

@author paperen

@url http://paperen.com/post/markdowneditor/

关于markdown

Markdown 的目标是实现「易读易写」。 可读性，无论如何，都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，而最大灵感来源其实是纯文本电子邮件的格式。 总之， Markdown 的语法全由一些符号所组成，这些符号经过精挑细选，其作用一目了然。比如：在文字两旁加上星号，看起来就像强调。Markdown 的列表看起来，嗯，就是列表。Markdown 的区块引用看起来就真的像是引用一段文字，就像你曾在电子邮件中见过的那样。

以上摘自http://wowubuntu.com/markdown/#philosophy

看到标题你都明白这次又是说啥了，还是JS图片展览的效果，but，这次同时附上 psytopic.com 里面的那个gallery（准确点来说是盗窃回来的），paperen弄来他们的js，css，同时搜索了关于lightory这个信息，准确点来说是个开发者（根据css文件开头的备注找到了这个线索），paperen当然也不确定是不是这个lightory（t.sina.com.cn/lightory），但可以肯定而且令我惊讶的是微博这位又是一个90后的杰出开发者（又让paperen觉得中国的IT未来一片光明，我们需要的只是创新而已），访问了 他的blog 与摆摆书架（http://bookfor.us/）paperen喜欢这样的UI，摆摆书架的玩法大家也可以了解下，挺有意思的。

多余的东西就到此为止了，说得有点多了……好吧，一开始就来个DEMO给大家看看（psytopic.com的那个）。

paperen以前弄的那个图片转换太失败了，有看代码的会发现是更换了img的src值来改变图片，而html代码中也只有一张图片（<IMG src="i.jpg" ?="" />），而这样的缺点就是要等待图片完全下载完才能切换出来，明显的表现是在网速不理想下点击切换按钮时不能马上转换图片而是要等待一定时间。所以paperen我觉得还是要在html中先所有图片都放出来然后用css隐藏一部分图片来制造这种效果是最理想的，其实这个方法也不是我想出来的，你随便找个有js滑动图片的网站看源代码都是将所有图片事先放出来的，因为这样会先下载图片，即使你只能看到一张图片。

http://paperen.com/demo/imageslider/

1.HTML结构