夏日博客

A-A+

jQuery插件scrollToBySpeed页面滚动示例

2016年01月10日 前端设计 暂无评论 阅读 7 views 次

scrollToBySpeed 是 jQuery 插件,是按照指定速度去滚动页面,而不是时间，下面我们来看一个基于scrollToBySpeed实现页面滚动效果，下面我们一起来看看吧。

使用方法:

引入插件文件到你的网页中，你可能还需要引入jQuery文件，因为这个插件依赖于jQuery库。

  1. <script src="jquery.js"></script>  
  2. <script src="scrolltobyspeed.jquery.js"></script>  

现在，当我们想要的窗口滚动我们给它的速度而不是时间。

  1. $('#element').scrollToBySpeed({  
  2.    
  3.   speed: 1000  
  4.    
  5. });  

我们还可以再加上一个偏移量到目的地的滚动位置。

  1. $('#element').scrollToBySpeed({  
  2.    
  3.   speed: 1000,  
  4.    
  5.   offset: -100  
  6.    
  7. });  

设置动画的缓存效果。

  1. $('#element').scrollToBySpeed({  
  2.    
  3.   easing: 'linear'  
  4.    
  5. });  

默认滚动的语境是整个窗口。在另一个滚动元件的滚动指定上下文作为一个选择器的字符串或一个jQuery对象。

  1. $('#element').scrollToBySpeed({  
  2.    
  3.   context: '.foo'  
  4.    
  5. });  

如果自定义宽松或回调的需要，使用插件来获得时间和手动动画。

  1. function () {  
  2.    
  3.   var $element = $('#element'),  
  4.    
  5.       duration = $element.scrollToBySpeed({mode:'duration'});  
  6.    
  7.   ...  
  8.    
  9. }  
标签：

给我留言