jQuery带视觉差的整个页面滚动特效插件OnePageScroll.js

2019-10-09 09:25:17 作者: 大梦 浏览: 4 [百度未收录] [搜狗已收录] [360已收录]

简要教程
OnePageScroll.js是一款十分好用的jQuery带视觉差的整个页面滚动特效插件。这个插件能够每次上下滚动一个页面,还带有视觉差效果,简单实用。
该整页滚动插件已经在Chrome, Firefox, Safari 和 IE10的桌面和移动浏览器上测试通过。
这个整页滚动插件会自动检测鼠标滚轮或鼠标手势(使用Eike的 jQuery Swipe Events )来决定向哪个方向滚动页面。当用户使用鼠标滚轮或手势是,插件将自动使用CSS3 transform 来使整个页面向上或向下滚动。
HTML结构
使用该整页滚动插件,首先要在页面中引入jquery和jquery.onepage.js以及onepage-scroll.css。

  ...
  
... ... ...
... 注意:推荐将wrapper div.mian放在body标签的下一级,这样更容易将它制作成全屏效果。 JAVASCRIPT 通过下面的语句来调用该整页滚动插件。 $(document).ready(function() { ... $(".main").onepage_scroll({ sectionContainer: "section", easing: "ease", animationTime: 1000, pagination: true, updateURL: false }); ... }); 下面介绍一些可用参数: sectionContainer :如果你不想使用section来作为每个单页,可以使用该参数来改变它。该参数接收jQuery选择器,默认标签为section。 easing :该参数用于确定页面在向上或向下滚动时的easing effect(缓动效果)。该参数接收所有的CSS3 easing选项,例如:linear, ease-in, ease-out, ease-in-out,你甚至可以使用cubic-bezier制作反弹效果。更多关于如何生成cubic-bezier的效果资料,请参考Ceaser。默认值为ease。 animationTime :该参数用于设置每次执行动画的时间。单位毫秒,默认值为1000。 pagination :如果设置为true,将自动在屏幕的右边添加一个分页条。你可以通过CSS很容易的改变它的位置。设置为false移除分页条。默认值为true。 updateURL :该参数用于设置是否改变用户当前浏览的section的URL到指定的URL。如果你想让每个section都指向不同的URL设置该参数为true。默认值为false。 公共方法 该整页滚动插件可以通过编程的方式来触发页面的滚动,它提供了一些公共方法。 $.fn.moveUp() 该方法使页面向上滚动一页。 $(".main").moveUp(); $.fn.moveDown() 该方法使页面向下滚动一页。 $(".main").moveDown(); 你可以在按钮上使用上面的公共方法来使页面整页上下滚动。

版权免责声明 1、本网站名称:罗网轻量级sns社区,源码分享平台
2、本站永久网址:http://www.luopay.cn
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的