zoukankan      html  css  js  c++  java
  • 模拟滚动条,且惯性滚动,实践[demo]

      先直接上Demo


    惯性滚动原理:

    View Code
     1            moveContainerScroll: function(x){
     2                // this.moveContainer.css({
     3                // left: -x/(this.fullWidth-this.dragWidth-20)*((this.subWidth * this.size + this.marginLeft)-this.fullWidth) + 'px'
     4                // });
     5                var left= -x/(this.fullWidth-this.dragWidth-20)*((this.subWidth * this.size + this.marginLeft)-this.fullWidth) ,
     6                    that = this;
     7                ~function(){
     8                    that.moveContainer.stop().animate({left:left},3000,null,function(t,b,c,d){
     9                        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
    10                        });
    11                }();
    12            } 

     关键就在算子tween的选择

    这里选择了Cubic.easeInOut加速后减速
    function(t,b,c,d){return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;}
    不了解javascript动画的可以看这篇文章《JavaScript Tween算法及缓动效果》
    很简单吧!
    模仿手机那样惯性滚动应该也不难了!
  • 相关阅读:
    图书 "ERP理论 方法与实践" 目录
    能为农村的家乡做些什么
    利用 wz_jsgraphics.js 画线
    在WebService中使用简单的自定义SoapHeader
    VS2005 自带的 DHTML 参考
    GridView控件 Image控件 与图片的二进制数据库存储和显示
    js 图片 拖动 复制
    [文摘20070706]国内外IT相关知名的企业或组织
    操作Word模板文件.dot 结合具体数据 生成Word文档 .doc
    Android:如何显示网络图片(转)
  • 原文地址:https://www.cnblogs.com/dreamback/p/2696790.html
Copyright © 2011-2022 走看看