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算法及缓动效果》
    很简单吧!
    模仿手机那样惯性滚动应该也不难了!
  • 相关阅读:
    Mysql简单使用
    yum与rpm常用选项
    vim常用配置
    Python模块安装方式
    VirtualBox新建虚拟机常用配置
    Linux中单引号与双引号区别
    etc/profile /etc/bashrc ~/.bash_profile ~/.bashrc等配置文件区别
    virtualenv简单使用
    SqlDataSource学习笔记20091111:ConflictDetection属性
    TreeView学习笔记20091114:遍历树(叶子节点设置多选框)并设置展开级别
  • 原文地址:https://www.cnblogs.com/dreamback/p/2696790.html
Copyright © 2011-2022 走看看