by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5920
本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

一、前言

开源两个起点中文网M站两个动效交互JS，MIT协议，保留版权注释信息，即使压缩后。

二、任意元素屏幕拖移外带惯性边缘弹动效果

此效果可以在起点中文网M站首页看到，gif录屏效果如下：

项目地址：https://github.com/yued-fe/inertia

https://github.com/yued-fe 是阅文集团用户体验设计中心前端组的团队github账号，虽然现在还是一片荒芜，但以后会有多多小而美或者大而全的项目开源出来，大家可以多多关注。

此动效使用原生JavaScript编写，适用于触屏设备。

使用也很简单：

使用示意

①. 引入JS文件，例如

<script src="Inertia.js"></script>

②. 绑定

new Inertia(ele);

然后恭喜你，效果就有了！

语法

new Inertia(ele, option);

其中：

• ele表示拖移弹动的元素；
• option为可选参数，包括：
  • edge，布尔值，表示是否吸附边缘，默认为true，也就是吸附。

补充说明

有时候希望元素不是紧靠边缘而是留有间隙，可以使用透明边框，或者标签嵌套使用padding等CSS属性控制。

关于原理实现

1. 惯性减速使用的是自己私藏的私动画JS小算法，可参见此文：“分享一个即插即用的私藏缓动动画JS小算法”。
2. 贴边弹动使用的是Tween.js中的一个Bounce算法，详见此文：“如何使用Tween.js各类原生动画运动缓动算法”。

三、基于窗体的下拉释放加载刷新效果

此效果在APP中很常见，在移动web端也是可以实现的。

阅读任意一本书籍，然后下拉释放，就可以看到交互效果。

或者你也可以狠狠地点击这里：下拉释放加载刷新简易demo

或者手机扫码访问：

项目地址：https://github.com/yued-fe/drag-loading

使用也很简单：

如何使用

①. 引入JS文件，例如

<script src="drag-loading.js"></script>

②. 绑定

new DragLoading(el, {
    onReload: function() {
        /** 执行刷新操作
         * ... 
        */

        // loading下拉还原
        this.origin();
    }
});

其中：

• el表示隐藏（height:0隐藏）在滚动窗体顶部的下拉元素；
• option为可选参数，包括：
  • trigger，包装器对象，感受下拉操作的容器，默认为$('body')。
  • maxY，数值，表示loading元素全部展开时候的高度值，也是触发onReload回调的边界高度，默认为40。
  • onReload，函数，当下拉足够高时候触发的刷新回调方法，默认是空函数。

暴露属性和方法

{
    // el就是loading元素
    el: el,
    // reload回调方法
    callback: {
        reload: function() {}
    },
    // loading元素高度等UI还原
    origin: function() {},
    // 下拉阻尼处理，这个一般用不到
    damping: function () {}
}

补充tips

• 本方法依赖jQuery.js或者Zepto.js。
• 仅支持窗体滚动，普通元素下拉加载可以自行微调支持，很简单，把trigger和滚动窗体都改成这个可以滚动的普通元素即可。
• loading元素默认高度0隐藏，然后本方法会对底边框进行设置，因此，不要使用border-bottom相关样式。

四、2017年春节前的最后一个结语

这下可以正式拜年了。

HTML、CSS以及JS……给你拜年了！

祝大家新的一年，升职加薪，心想事成！

来，high起来！

本文为原创文章，包含脚本行为，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：http://www.zhangxinxu.com/wordpress/?p=5920

（本篇完）