免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 广信之家 > 免费资源 > 免费插件 > 文章正文

一个页面内滚动的jQuery插件 - PageScroller

时间:02-29 15:54 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  今天介绍一款页面内滚动的jQuery插件-pagescroller,以前我们也介绍过类似的jQuery插件 jQuery的滚动插件Waypoints。

一个页面内滚动的jQuery插件 - PageScroller

今天介绍一款页面内滚动的jQuery插件-pagescroller,以前我们也介绍过类似的jQuery插件 jQuery的滚动插件Waypoints。

主要特性:

支持缺省方式左侧导航

支持向上及其向下滚动图标,支持俩个主题

支持顶端固定导航菜单

支持右侧导航

支持IE9+,firefox,chrome等浏览器

如何使用?

倒入相关类库

定义滚动区域:$('#wrapper').pageScroller()

一个页面内滚动的jQuery插件 - PageScroller

Javascript

$(document).ready(function(){
 
 // instantiate page scroller plugin
 
 var navLabel = new Array('Introduction', 'How It Works', "What's Included?", 'Documentation', 'Download Plugin');
 
 $('#main').pageScroller({ navigation: navLabel });
 
 /* AVAILABLE OPTIONS:
  * currentSection     starting position
  * sectionClass    class of each section
  * navigationClass    navigation element class
  * scrollOffset    offset target area from top of section
  * animationSpeed     change duration of animation in miliseconds
  * animationBefore     callback: assign a function before animation
  * animationComplete     callback: assign a function after animation
  * onChange     callback: assign a function for when section changes
 */  
 
 // assigns "next" API function to button
 
 $('.next').click(function(e){
  e.preventDefault();
  pageScroller.next();
 });
 
 //assigns "prev" API function to button 
  
 $('.prev').click(function(e){
  e.preventDefault();
  pageScroller.prev();
 });
 
 $('.jumpTo').click(function(e){
  e.preventDefault();
  pageScroller.goTo(4);
 });
    
});

来源:一个页面内滚动的jQuery插件 - PageScroller

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,一个页面内滚动的jQuery插件 - PageScroller对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与一个页面内滚动的jQuery插件 - PageScroller无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈