网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
scrolllify是一个jQuery垂直滚动插件,通过向下滚动页面时提供快照行为来增强单页滚动网站体验。
特征:
使用箭头键、鼠标移动或触摸滑动在一组区域中滚动。
向下/向上滚动时捕捉到滚动的页面。
能隐藏滚动条。
自动更新滚动的网址位置。
支持回调。
跨浏览器和跨设备。
支持触摸事件。
1.在html页面末尾加载最新版本的jquery库和jqueryscrolllify插件文件。
<script src="jquery.min.js"></script>
<script src="jquery.scrollify.js"></script>
2. 从CDN中加载jQuery easing插件,以获得简化选项(可选)。
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
3.为您的网站创建一组单页分区。
<section>
Section 1
</section>
<section>
Section 2
</section>
<section>
Section 3
</section>
..
4. 插件初始化。
$(function() {
$.scrollify({
section : "section"
});
});
5.插件默认选项。
$(function() {
$.scrollify({
// section should be an identifier that is the same for each section
// A selector for the sections.
section: "section",
// Scrollify lets you define a hash value for each section.
// This makes it possible to permalink to particular sections.
// This is set as a data attribute on the sections.
// The name of the data attribute is defined by 'sectionName'.
sectionName: "section-name",
// A CSS selector for non-full-height sections, such as a header and footer.
interstitialSection: "",
// Define the easing method.
easing: "easeOutExpo",
// Scrolling speed in milliseonds
scrollSpeed: 1100,
// A distance in pixels to offset each sections position by.
offset : 0,
// A boolean to define whether scroll bars are visible or not.
scrollbars: true,
// Target container
target:"html,body",
// A string of selectors for elements that require standard scrolling behaviour.
standardScrollElements: false,
// A boolean to define whether Scollify assigns a height to the sections.
setHeights: true,
// Allows scrolling over overflowing content within sections
overflowScroll:true,
// Updates the browser location hash when scrolling through sections
updateHash: true,
// Allows to handle touch scroll events
touchScroll:true,
// callbacks
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {}
});
});
6.api方法。
// Used to scroll to a particular section.
// It can be parsed the index of the section, or the name of the section preceded by a hash.
$.scrollify.move("#name");
// Used to scroll to a particular section without animation.
// It can be parsed the index of the section, or the name of the section preceded by a hash.
$.scrollify.instantMove("#name");
// Used to scroll to a panel that immediately follows the current panel.
$.scrollify.next()
// Used to scroll to a panel that immediately precedes the current panel.
$.scrollify.previous()
// Used to scroll to a panel that immediately follows the current panel, without animation.
$.scrollify.instantNext()
// Used to scroll to a panel that immediately precedes the current panel.
$.scrollify.instantPrevious()
// Removes all Scrollify events and removes set heights from the panels.
$.scrollify.destroy()
// The update methods recalculates the heights and positions of the panels.
$.scrollify.update()
// The current method returns the current section as a jQuery object.
$.scrollify.current()
// The disable method turns off the scroll snap behaviour so that the page scroll like normal.
$.scrollify.disable()
// The enable method resumes the scroll snap behaviour after the disable method has been used.
$.scrollify.enable()
// The isDisabled method returns true if Scrollify is currently disabled, otherwise false.
$.scrollify.isDisabled()
转载请注明来源:jQuery简单全屏垂直滚动插件(Scrollify)
本文永久链接地址:https://www.moyouyouw.cn/code/789.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论