当前位置:主页 > 特效 > 滚动代码 >

一款方便的全屏滚动jQuery插件
栏目分类:滚动代码   发布日期:2015-09-02   浏览次数:

一款方便的全屏滚动jQuery插件
一款方便的全屏滚动jQuery插件,此款jQuery插件可以自动适应屏幕高度全屏滚动窗口,当页面快滚动到下一屏,自动滚动到显示多的一屏。

用法

包括在你的HTML页面的最新jQuery和资产/ JS/ jquery.windows.js

html
  1. <section class="window">section> 
  2. <section class="window">section> 
  3. <section class="window">section> 
  4. <section class="window">section> 
  5. <section class="window">section> 
js
  1. $(document).ready(function(){ 
  2.  
  3.     $('.window').windows({ 
  4.         snapping: true
  5.         snapSpeed: 500, 
  6.         snapInterval: 1100, 
  7.         onScroll: function(scrollPos){ 
  8.             // scrollPos:Number 
  9.         }, 
  10.         onSnapComplete: function($el){ 
  11.             // after window ($el) snaps into place 
  12.         }, 
  13.         onWindowEnter: function($el){ 
  14.             // when new window ($el) enters viewport 
  15.         } 
  16.     }) 
  17.  
  18. }); 
css
  1. .window{ 
  2.     width:100%
  3.     height:100%
  4.     position:absolute
  5.  
  6. @for $i from 1 through 6
  7.     .window:nth-child(#{$i}){ 
  8.         background:nth($colors, $i); 
  9.         top:($i - 1) * 100%
  10.     } 

 

相关热词: 全屏滚动jQuery插件

Copyright © 2002-2030 版权所有   闽ICP备07035126号-12   关于我们 | 广告合作 | 版权声明 | 意见反馈 | 联系方式 | 原创投稿 | 网站地图 |
特效 教程 资源 资讯