模拟滚动条，且惯性滚动,实践[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算法及缓动效果》

 

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

 

 

转载于:https://www.cnblogs.com/dreamback/archive/2012/09/21/2696790.html