仿iPhone上的SCROLL效果

查看演示

最近项目中需要用这种效果,为了方便调试就写了个WEB版。面向过程的写法确实扩展性差。此版本就此打住吧。

实现原理过程基本类似拖拽效果,需要注意一点的是左右拖动时的动画速度和距离,如果拖动的快,那么滚动的也快距离也远。

根据鼠标mousemove时候最后两次的e.clientX值相减来得到速度值。 移动越快得到的数值越大。利用它就可以计算动画的速度了。

      var lastX=0;
      function mouseMove(e){
     speed=e.clientX-lastX; 
     lastX=e.clientX //最后更新lastX值   
    }

其它就是一些边界判断了 没什么难度。仅供娱乐,更好的写法还是参考iscroll吧。http://cubiq.org/iscroll-4

原文地址:https://www.cnblogs.com/yaojaa/p/3082288.html