建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

One Page Scroll 时尚快速的 JQuery 全屏单页滚动效果插件

来源:易助科技网浏览量:30收藏

简介


One Page Scroll是一个时尚快速的jQuery插件,用于创建具有点导航的响应式全屏单页滚动效果,类似于新的苹果iPhone 5S/5C网站。

(下载的附件中附有DEMO)


更多单页滚动插件:👉  [ 详情 ]


一个时尚快速的jQuery全屏单页滚动效果插件One Page Scroll-示例图


浏览器支持情况


桌面和智能手机上的Chrome、Firefox和Safari等现代浏览器都经过了测试。IE8和IE9也应该可以正常工作。



使用


1.  引入文件


💡  注意:强烈建议使用jQuery 1.9.0或更高版本,因为将低于1.8.3的jQuery和jQuery.onepage-scroll.js一起使用会导致基于哈希的XSS漏洞。


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.onepage-scroll.js"></script>

<!--在页面上包含所需的jQuery One Page Scroll样式表-->
<link href='onepage-scroll.css' rel='stylesheet' type='text/css'>



2.  HTML


<div class="main">
  <section class="page1">
    ... SECTION 1 ...
  </section>
  <section class="page2">
    ... SECTION 2 ...
  </section>
  <section class="page3">
    ... SECTION 3 ...
  </section>
</div>



3.  调用


<script>
  $(document).ready(function(){
    $(".main").onepage_scroll({
      sectionContainer: "section"
    });
  });
</script>



4.  公共方法


$.fn.moveUp()
//该方法使页面向上滚动一页。

$(".main").moveUp();

$.fn.moveDown()
//该方法使页面向下滚动一页。

$(".main").moveDown();



5. 回调


您可以使用回调在页面移动之前或之后执行操作。


beforeMove(current_page_index)

这个回调在插件执行移动之前被调用。


  $(".main").onepage_scroll({
    beforeMove: function(index) {
      ...
    }
  });


afterMove(next_page_index)

此回调将在执行移动动画后调用。


  $(".main").onepage_scroll({
    afterMove: function(index) {
      ...
    }
  });



相关链接


GitHub 地址 :  https://github.com/peachananr/onepage-scroll

易助科技网效果演示地址:  http://demo.easyzone.net.cn/plugin/OnePage/demo/demo.html