jQueryScrollify一款鼠标滚轮控制页面滚动效资源-CSDN文库

共8个文件

js：5个

url：1个

css：1个

5星 · 超过95%的资源需积分: 10 172 浏览量 2015-01-04 11:04:14 上传评论 1 收藏 40KB RAR 举报

jQuery Scrollify是一款强大的JavaScript库，专门用于实现鼠标滚轮控制的页面滚动效果。这款插件使得网页的滚动体验更加平滑、优雅，特别是在创建单页应用（Single Page Applications）或者设计全屏滚动网站时非常实用。它允许你精确地控制页面在滚动时如何分段显示内容，创造出电影般的浏览体验。 Scrollify的核心功能包括： 1. **分段滚动**：Scrollify将网页内容分割成多个部分或“段”，当用户滚动鼠标时，这些段会逐一平滑过渡，而不是传统的一整块快速滚动。 2. **滚动事件监听**：它可以监听用户的滚动行为，并在特定的段到达顶部或底部时触发自定义的回调函数，这样开发者可以添加额外的交互效果。 3. **定位**：通过`scrollify.current()`方法，你可以获取当前处于视口中的段，这对于动态更新内容或调整元素样式非常有用。 4. **导航**：Scrollify支持创建导航菜单，用户可以通过点击菜单直接跳转到指定的段，提供更好的用户体验。 5. **API控制**：提供了一系列API方法，如`scrollify.enable()`、`scrollify.disable()`和`scrollify.instantify()`等，方便开发者在需要的时候启用、禁用或立即跳转到某个段。 6. **自定义配置**：开发者可以根据项目需求，调整Scrollify的各种设置，如滚动速度、间距、是否禁用默认的浏览器滚动行为等。在实际使用中，首先需要在HTML文档中引入jQuery库和Scrollify插件的JS文件，然后在JavaScript中初始化Scrollify，例如： ```javascript $(function() { $.scrollify({ section : ".section", // 定义分段的CSS选择器 sectionName : "section-name", // 从data-name属性获取段的唯一标识 interstitialSection : "", // 间隔段选择器，如广告或固定元素 easing: "easeOutExpo", // 动画缓动函数 scrollSpeed: 1000, // 滚动速度（毫秒） offset : 0, // 滚动时离顶部的距离 next : ".next", // 下一个按钮选择器 prev : ".prev", // 上一个按钮选择器 afterLoad : function(index) {}, // 每个段加载后的回调 afterRender : function() {}, // 所有段渲染完成后的回调 beforeMove : function(index) {}, // 滚动前的回调 afterMove : function(index) {} // 滚动后的回调 }); }); ``` 结合CSS样式，你可以对每个段进行个性化的布局和设计，使整个页面看起来既美观又统一。在提供的压缩包中，通常会包含一个示例项目，包含HTML、CSS和JavaScript文件，你可以参考这个例子来快速理解和使用Scrollify。 jQuery Scrollify是一个强大且易于使用的工具，能够帮助开发者创建出引人入胜的全屏滚动效果，提高网站的用户体验。通过深入学习和实践，你将能够熟练地利用它来实现各种创新的网页设计效果。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery Scrollify 一款鼠标滚轮控制页面滚动效.rar （8个子文件）

jQuery Scrollify 一款鼠标滚轮控制页面滚动效

css

main.css 3KB

访问素材家园.url 129B

index.html 3KB

jquery.js 91KB

html5shiv.min.js 3KB

scrollify.min.js 3KB

main.js 261B

jquery.easing.1.3.js 6KB

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery Scrollify 一款鼠标滚轮控制页面滚动效果插件 - 素材家园</title>  <link rel="stylesheet" href="css/main.css" /> </head> <body> <section class="panel home" data-section-name="home"> <div class="inner"> <header> <h1>SCROLLIFY</h1> <p class="tagline">Power steering for your scroll wheel</p> </header> <p>A jQuery plugin that assists scrolling and smoothly snaps to sections.</p> <p>Fully configurable and optimised for touch.</p> </div> </section> <section class="panel overview" data-section-name="overview"> <div class="inner"> <h2>Basic Setup</h2> <p>Scrollify requires jQuery 1.6+ and an easing library such as jquery.easing.js.</p> <pre> <! doctype html> <html> <head> <script> $(function() { $.scrollify({ section : "section", }); }); </script> </head> <body> <section></section> <section></section> </body> </html> </pre> </div> </section> <section class="panel configuration" data-section-name="configuration"> <div class="inner"> <h2>Configuration</h2> <pre> $.scrollify({ section : "section", sectionName : "section-name", easing: "easeOutExpo", scrollSpeed: 1100, offset : 0, scrollbars: true, before:function() {}, after:function() {} }); </pre> </div> </section> <section class="panel options" data-section-name="options"> <div class="inner"> <h2>Options</h2> <dl> <dt>section</dt> <dd>A selector for the sections.</dd> <dt>sectionName</dt> <dd>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'.</dd> <dt>easing</dt> <dd>Define the easing method.</dd> <dt>offset</dt> <dd>A distance in pixels to offset each sections position by.</dd> <dt>scrollbars</dt> <dd>A boolean to define whether scroll bars are visible or not.</dd> <dt>before</dt> <dd>A callback that is called before a section is scrolled to via the move method. Arguments include the index of the section and an array of all section elements.</dd> <dt>after</dt> <dd>A callback that is called after a new section is scrolled to. Arguments include the index of the section and an array of all section elements.</dd> </dl> </div> </section> <section class="panel methods" data-section-name="methods"> <div class="inner"> <h2>Methods</h2> <p>The move method can be used to scroll to a particular section. This can take the index of the section, or the name of the section preceded by a hash.</p> <pre> $.scrollify("move","#name"); </pre> </div> </section> <script src="js/jquery.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/scrollify.min.js"></script> <script src="js/main.js"></script> </body> </html>

评论收藏

内容反馈