jquery页面滚动定位(支持上下滑动)

所属分类:UI-滚动

 7715  65  查看评论 (4)
jquery页面滚动定位(支持上下滑动) ie兼容8

在页面上方引入:(注:对 jquery 的版本要求不高)

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/pagescroller.min.js"></script>

页面结构:

<div id="div_box" class="light">
  <a href="#" class="prev">
    <img src="./images/icon_arrow-up_light.png" alt="" width="28" height="31" /></a>
  <a href="#" class="next">
    <img src="./images/icon_arrow-down_light.png" alt="" width="28" height="31" /></a>
</div>
<div id="wrapper">
  <div id="main">
    <div class="section">
      <h1>内容一</h1></div>
    <div class="section">
      <h1>内容二</h1></div>
    <div class="section">
      <h1>内容三</h1></div>
    <div class="section">
      <h1>内容四</h1></div>
    <div class="section">
      <h1>内容五</h1></div>
  </div>
  <!-- [END] #main --></div>
<!-- [END] #wrapper --></body>

最后在底部加入:

<script type="text/javascript">
    $(document).ready(function() {
        var navLabel = new Array('Introduction', 'How It Works', "What's Included?", 'Documentation', 'Download Plugin');
        $('#main').pageScroller({
            navigation: navLabel
        });
        $('.next').click(function(e) {
            e.preventDefault();
            pageScroller.next();
        });
        $('.prev').click(function(e) {
            e.preventDefault();
            pageScroller.prev();
        });
    });
</script>


相关插件-滚动

jquery文字上下滚动

jquery文字上下滚动插件jqScroll.js调用简单,代码注释很清楚。
  滚动
 11958  133

网站广播插件

网站发布消息的广播插件
  滚动
 13595  93

jQuery全屏滚动插件XSwitch

XSwitch是一个可以高度自定义的全屏滑动JQuery插件
  滚动
 13069  75

jQuery上下左右滚动插件rollSlide.js

实现上下左右自动滚动、无缝滚动
  滚动
 8807  107

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    以爱封缄?? 0
    2017/4/11 16:02:09
    lhs8010 0
    2016/11/16 15:11:11
    不错,项目正好要用。
        攻城狮20150
        2016/11/16 16:11:03
        谢谢!
    回复
    KD 0
    2016/7/13 21:07:22
    不错,感谢分享哦 回复
取消回复