注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery响应式页面滚动插件One Page Scroll

动画 fishcity 8159浏览

jquery响应式页面滚动插件One Page Scroll

One Page Scroll,顾名思义一个页面的滚动,它可以轻松的建立一个动感的响应式滚动效果页面,比较适用于单页面的专题站,如:Apple's iPhone 5S 这样的网站,能大大的提升用户的体验,也提升自身的品牌形象。当然One Page Scroll是基于jquery的,且需要1.9.0以上版本,支持现代浏览器和IE8以上版本。

使用方法

<link href='onepage-scroll.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.onepage-scroll.js"></script>

构建html,容器元素必须在body标签内,便于插件工作在整个页面内。代码如下

<body>
  ...
  <div class="main">
    <section>...</section>
    <section>...</section>
    ...
  </div>
  ...
</body>

写入JS,初始化插件

$(".main").onepage_scroll({
   sectionContainer: "section",     // 可自定义选择器
   easing: "ease",                  // 接受 CSS3 动画类型: "ease", "linear", "ease-in","ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
   animationTime: 1000,             // 每个板块的动画时间
   pagination: true,                // 是否显示分页
   updateURL: false,                // 是否随着用户滚动更新URL
   beforeMove: function(index) {},  // 页面滚动前回调函数
   afterMove: function(index) {},   // 页面滚动后回调函数
   loop: false,                     // 页面循环滚动
   keyboard: true,                  // 是否激活键盘控制
   responsiveFallback: false,        // 改变浏览器大小后恢复到正常的滚动,如设计宽度小于600px时,恢复正常滚动
                                                       
   direction: "vertical"            // 滚动方向,选项 "vertical" 和 "horizontal". 默认值 "vertical".  
});

方法

 $(".main").moveUp(); //向上滚动
 $(".main").moveDown(); //向下滚动
 $(".main").moveTo(3); //滚动到index值的页面

转载请注明:jQ酷 » jquery响应式页面滚动插件One Page Scroll

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。