为博客添加一个点击回到顶部的功能

这几晚花了点时间了解了下coffeescript的语法, 同时也学习一下GIMP的简单使用, 还是蛮有感触的.

之所以开始看coffeescript主要原因有三点: 一是因为一直在间断地学习rails, 难免会接触到到一些有关coffeescriptsass的东西 (不得不承认web开发这块涌现出来的新技术确实很多); 二是因为觉得自己“应该”学习一下javascript, 而coffeescript的最核心的原则就是It’s just JavaScript, 加上它融合了ruby, python的特点, 因此觉得学起来应该比较容易; 三是因为看了这篇介绍各个语言薪水的软文, 觉得可以学习一下, 说不定以后有用武之地 (期间还屌丝地google了下coffeescript, typescript, dart之间的优劣^_^). 经过几晚的接触, 觉得它是一门很简洁灵活的语言. 此外还顺带地解了下当下热门的nodejs.

再来说一下GIMP. 注意到它因为在LinuxToy上看到了有关它的视频教程的文章, 之后又看到了善用佳软上xbeta大大的分享. 既是开源的软件, 自己有时也有P图的需要, 加上也有时间和精力, 为什么不学一下呢? 几天下来的最大感受就是: GIMP很强大. 不过相比PS, GIMP的学习资源确实少了一点.

学了东西就要用, 不然容易忘. 因此自己就花了点时间给博客加个点击回到顶部的功能, 借此学习一下两者的使用;)

做图

做网页肯定少不了美工的活. 即使有了很多现成的素材也需要根据自己的风格进行改造. 自己在网上找了下箭头的素材, 并根据需要对图像进行了大小调整, 颜色调整, 背景透明, 添加边框的操作. 这些操作对于之前的我来说会觉得很麻烦, 比如觉得装软件麻烦, 操作起来麻烦(不熟练). 但是这对gimp来说都是不是问题. 嗯, 唯一需要的就是坚持学习一下.

简单的js代码

简单实现这个功能的js代码量很小, 网上搜了一下, 可以借助JQuery的animate事件来实现. 对应的coffeescript的代码如下:

coffee
1
2
3
4
5
# add html element, thanks to ly bro ;)

$ ->
    $('img.justforfun').click ->
        $('html, body').animate scrollTop: '0',  1000

对应的js代码可以使用coffee -c来导出. 相比之下coffeescript确实更加方便和简洁. 更多的实例推荐到官网查看;)

有了js之后我们只需要再设置下对应图片的postion即可. 于是一个简易的功能完成了, 当然也有不少缺陷.

结束

通过实现这样一个功能确实学习到了很多东西, 而且google出来不少很不错的博客;)

Keep Learning

Comments