原创

  • 移动端构建可滑动区块

    在移动设备中,页面中元素的滑动一直是一个困扰人的问题。PC上一个简简单单的overflow: auto便能解决的事情,在移动端却需要各种“花式”解法。


    这里我们先简单罗列一下JS和CSS常见解法。

    使用iScroll来模拟滑动

    iScroll是一款强大的用于移动端滑动效果的插件,很多移动端应用都会用到它来制作滑动效果。它除了具有实现滑动中的回弹、势能、吸附边界、滚动条等效果外,还有实现slide的能力,放大缩小,无限滚动,键盘绑定,滚轮控制等额外功能。iScroll为了使滑动效果更加流畅,会阻止实例化对象中的元素节点上的click事件的默认行为和冒泡,再动态的生成事件对


  • CSS开发者大会归来——如何用CSS创建一个内凹圆角

    写本篇文章是介绍一下在8.8号举办的第二届CSS开发者大会上,由CSS魔法为大家讲述的一个CSS技巧——纯CSS创建一个内凹圆角。希望能有更多的人,通过这个案例,重新燃起对CSS的那份激情。

    进入正片,有一个传说,它是这样的...

    在设计师给到一个这样tab标签页的设计稿时

    美妙的设计稿

    你很可能会对设计师说,不行,这个实现不了。因为你注意到,每一个标签页,底部都带有两个延伸出的图形。先劝你慢点回绝设计师的要求,因为我们将难点分解出来后,剩下的问题就是如何创建这么一个内凹圆角。

    内凹圆角分解图

    简单直接的,当然是用图片了。

    但是这里我们将要见到一个用纯CSS实现内凹

  • Google Safebrowsing 与 前端静态资源加载

    这些年随着互联网的兴起,钓鱼网站、恶意站点也是层出不穷。浏览器生产商为解决这些问题费了不少力,想了不少解决办法。比如给 alert 对话框添加了 “阻止此页面创建更多对话框” 选项以避免浏览器被恶意的无限弹框;增加了恶意站点的提示,需要手动加入白名单后才可以访问等。

    这些防止用户受到伤害的措施中,有一项是我们今天要讲述的主角 —— Google Safebrowsing。它会对网页请求的静态资源经由浏览器与谷歌通信以识别资源是否安全,这也就改变了我们对前端静态资源加载的一般认知。


    ## 什么是 Google Safebrowsin
  • 利用 Electron 开发快速截图工具(二)

    上一篇我们讲到主界面开发完成,这一篇我们讲子界面的开发。

    子界面的生命周期比较短,罗列如下:

    • 窗口打开并显示截图;
    • 用户截图点击确定后,发送截图数据至主进程;
    • 主进程关闭子界面。

    我们来看看子界面中的一个个功能是如何实现的。


    子界面中元素

    canvas 元素

    我选用了 canvas 作为截图的容器,主要是考虑到后续用户划取选区时比较方便。

    • DIV 难以实现遮罩中的选区透明的效果;
    • DIV 在从右至左,从下至上划取选区时需要不断的计算起始点坐标(左上角为起始点)。

    按钮元素

    子界面中有三个按钮:

    • 确定按钮:保存截图至剪贴板,并关闭子界面

  • 易豆每日签到功能实现

    为了更好的推动电商媒体化战略,产品希望在网站的顶部增加“每日签到”功能,每天签到可以赠送易豆(类似于积分的概念,目前仅用于报名众测活动,原因是众测活动太火热了,用易豆做为门槛)。由于是偏向社交的功能,所以在交互方面的效果会更加注重一些。

    目前初版已经完成(年后发布),效果图如下:

    1

    下面就来说说签到功能中一些效果的实现。


    ## 数字动画

    从效果图中可以看到,当获取到用户的易豆数量以及签到成功后增加易豆的时候,易豆数量都会有一个不断变化数字的动画效果。实现这个效果的方法如下:

    /**
     * 数字变换动画
     * @param {Number|String} oldNumbe