模拟滚动条，且惯性滚动,实践[demo]

  先直接上Demo

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

惯性滚动原理：

 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;

                        });

                }();

            } 

 关键就在算子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算法及缓动效果》

 

很简单吧！
模仿手机那样惯性滚动应该也不难了！