设为首页 - 加入收藏
广告 1000x90
您的当前位置:主页 > 特效 > 滚动代码 > 正文

一款方便的全屏滚动jQuery插件

来源:未知 编辑:admin 时间: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.     } 

 

相关推荐:

网友评论:

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
Copyright © 2021 众联设计之家

Power by DedeCms

Top