以下是 jQuery全屏窗口位置确定js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<title>jQueryȫ������λ��ȷ�����Windows</title>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.windows.js"></script>
<link rel="stylesheet" href="css/webfonts/ss-social/webfonts/ss-social.css"/>
<link rel="stylesheet" href="css/webfonts/ss-pika/webfonts/ss-pika.css"/>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- NOTE: each "window" is a section element with class .window -->
<section id="0" class="window">
<div class="content">
<i class="ss-icon">windows</i>
<h1>windows</h1>
<h2>a handy, loosely-coupled jQuery plugin for full-screen scrolling windows</h2>
</div>
</section>
<section id="1" class="window">
<div class="content">
<h2>
project root<br/>
| -- css<br/>
| -- | -- main.css (compiled)<br/>
| -- js<br/>
| -- | -- <span class="highlight">jquery.windows.js</span><br/>
| -- scss<br/>
| -- | -- <span class="highlight">main.scss</span><br/>
| -- <span class="highlight">index.html</span>
</h2>
</div>
</section>
<section id="2" class="window">
<div class="content">
<h2>How it works</h2>
<div class="explanation">This is a light bootstrap that sets up:
<ul>
<li>- the basic SASS for sequential full screen windows</li>
<li>- a jQuery plugin for managing their positions as the user scrolls</li>
</ul>
The plugin simply opens up a handy API for position management, provides callbacks, and will allow for window snapping. No CSS is applied to the callee.
</div>
</div>
</section>
<section id="3" class="window">
<pre>
$('.window').windows({
snapping: true,
snapSpeed: 500,
snapInterval: 1100,
onScroll: function(scrollPos){
// scrollPos:Number
},
onSnapComplete: function($el){
// after window ($el) snaps into place
},
onWindowEnter: function($el){
// when new window ($el) enters viewport
}
});
</pre>
</section>
<section id="4" class="window">
<div class="content">
<h1>api</h1>
<pre>
// returns ratio 0-1
$('.window:eq(0)').ratioVisible();
// returns boolean of whether or not is visible on screen
$('.window:eq(0)').isOnScreen();
// get most visible window
$('.window').getCurrentWindow();
</pre>
</div>
</section>
<section id="5" class="window">
<div class="content">
<a href="#" title="Download Me!" id="btn-wrap">
<span class="title">abc</span>
</a>
</div>
</section>
<script>
$(document).ready(function(){
var $windows = $('.window');
$windows.windows({
snapping: true,
snapSpeed: 500,
snapInterval: 1100,
onScroll: function(s){},
onSnapComplete: function($el){},
onWindowEnter: function($el){}
});
});
</script>
</body>
</html>
JS代码(jquery.windows.js):
/*! * windows:a handy,loosely-coupled jQuery plugin for full-screen scrolling windows. * Version:0.0.1 * Original author:@nick-jonas * Website:http://www.workofjonas.com * Licensed under the MIT license */
;
(function ( $,window,document,undefined ){
var that = this,pluginName = 'windows',defaults ={
snapping:true,snapSpeed:500,snapInterval:1100,onScroll:function(){
}
,onSnapComplete:function(){
}
,onWindowEnter:function(){
}
}
,options ={
}
,$w = $(window),s = 0,// scroll amount t = null,// timeout $windows = [];
/** * Constructor * @param{
jQuery Object}
element main jQuery object * @param{
Object}
customOptions options to override defaults */
function windows( element,customOptions ){
this.element = element;
options = options = $.extend({
}
,defaults,customOptions);
this._defaults = defaults;
this._name = pluginName;
$windows.push(element);
var isOnScreen = $(element).isOnScreen();
$(element).data('onScreen',isOnScreen);
if(isOnScreen) options.onWindowEnter($(element));
}
/** * Get ratio of element's visibility on screen * @return{
Number}
ratio 0-1 */
$.fn.ratioVisible = function(){
var s = $w.scrollTop();
if(!this.isOnScreen()) return 0;
var curPos = this.offset();
var curTop = curPos.top - s;
var screenHeight = $w.height();
var ratio = (curTop + screenHeight) / screenHeight;
if(ratio > 1) ratio = 1 - (ratio - 1);
return ratio;
}
;
/** * Is section currently on screen? * @return{
Boolean}
*/
$.fn.isOnScreen = function(){
var s = $w.scrollTop(),screenHeight = $w.height(),curPos = this.offset(),curTop = curPos.top - s;
return (curTop >= screenHeight || curTop <= -screenHeight) ? false:true;
}
;
/** * Get section that is mostly visible on screen * @return{
jQuery el}
*/
var _getCurrentWindow = $.fn.getCurrentWindow = function(){
var maxPerc = 0,maxElem = $windows[0];
$.each($windows,function(i){
var perc = $(this).ratioVisible();
if(Math.abs(perc) > Math.abs(maxPerc)){
maxElem = $(this);
maxPerc = perc;
}
}
);
return $(maxElem);
}
;
// PRIVATE API ---------------------------------------------------------- /** * Window scroll event handler * @return null */
var _onScroll = function(){
s = $w.scrollTop();
_snapWindow();
options.onScroll(s);
// notify on new window entering $.each($windows,function(i){
var $this = $(this),isOnScreen = $this.isOnScreen();
if(isOnScreen){
if(!$this.data('onScreen')) options.onWindowEnter($this);
}
$this.data('onScreen',isOnScreen);
}
);
}
;
var _onResize = function(){
_snapWindow();
}
;
var _snapWindow = function(){
// clear timeout if exists if(t){
clearTimeout(t);
}
// check for when user has stopped scrolling,& do stuff if(options.snapping){
t = setTimeout(function(){
var $visibleWindow = _getCurrentWindow(),// visible window scrollTo = $visibleWindow.offset().top,// top of visible window completeCalled = false;
// animate to top of visible window $('html:not(:animated),body:not(:animated)').animate({
scrollTop:scrollTo}
,options.snapSpeed,function(){
if(!completeCalled){
if(t){
clearTimeout(t);
}
t = null;
completeCalled = true;
options.onSnapComplete($visibleWindow);
}
}
);
}
,options.snapInterval);
}
}
;
/** * A really lightweight plugin wrapper around the constructor,preventing against multiple instantiations * @param{
Object}
options * @return{
jQuery Object}
*/
$.fn[pluginName] = function ( options ){
$w.scroll(_onScroll);
$w.resize(_onResize);
return this.each(function(i){
if (!$.data(this,'plugin_' + pluginName)){
$.data(this,'plugin_' + pluginName,new windows( this,options ));
}
}
);
}
;
}
)( jQuery,window,document );
CSS代码(main.css):
@import url("http://hello.myfonts.net/count/25cb92");/* FONTS ---------------------------------------------------------- */
@font-face{font-family:'BrandonText-BoldItalic';src:url("webfonts/25CB92_0_0.eot");src:url("webfonts/25CB92_0_0.eot?#iefix") format("embedded-opentype"),url("webfonts/25CB92_0_0.woff") format("woff"),url("webfonts/25CB92_0_0.ttf") format("truetype");}
@font-face{font-family:'BrandonText-Bold';src:url("webfonts/25CB92_1_0.eot");src:url("webfonts/25CB92_1_0.eot?#iefix") format("embedded-opentype"),url("webfonts/25CB92_1_0.woff") format("woff"),url("webfonts/25CB92_1_0.ttf") format("truetype");}
@font-face{font-family:'BrandonText-Regular';src:url("webfonts/25CB92_2_0.eot");src:url("webfonts/25CB92_2_0.eot?#iefix") format("embedded-opentype"),url("webfonts/25CB92_2_0.woff") format("woff"),url("webfonts/25CB92_2_0.ttf") format("truetype");}
/* COLORS ---------------------------------------------------------- */
/* line 1,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
h1{font-family:BrandonText-Bold,Futura,Helvetica,Arial,sans-serif;font-size:6.0em;color:#1babb7;text-align:center;}
/* line 7,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
h2{font-family:BrandonText-Regular,Futura,Helvetica,Arial,sans-serif;font-size:1.4em;text-align:center;color:#333a3e;}
/* line 13,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
p{font-family:BrandonText-Regular,Futura,Helvetica,Arial,sans-serif;color:#333a3e;font-size:1.4em;}
/* line 18,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
pre{color:#d5d7dd;color:#bcbdc0;font-size:1.4em;line-height:1.6em;}
/* line 26,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(1) .content{position:absolute;top:50%;width:100%;margin-top:-170px;}
/* line 31,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(1) .content i{font-size:4.0em;width:100%;text-align:center;display:inline-block;color:#6ab29f;}
/* line 38,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(1) .content h1{margin:0;}
/* line 41,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(1) .content h2{padding:0 30px;}
/* line 49,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(2) .content{position:absolute;top:50%;left:50%;margin-top:-180px;margin-left:-160px;}
/* line 55,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(2) .content h2{color:#d5d7dd;text-align:left;}
/* line 58,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(2) .content h2 .highlight{color:white;}
/* line 67,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(3) ul{list-style-type:none;}
/* line 68,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(3) .content{position:absolute;top:50%;width:100%;margin-top:-230px;}
/* line 73,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(3) .content h2{text-align:center;font-size:3.0em;}
/* line 77,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(3) .content .explanation{font-family:BrandonText-Regular,Futura,Helvetica,Arial,sans-serif;color:#333a3e;font-size:1.4em;text-align:center;padding:0 15%;}
/* line 83,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(3) .content .explanation li{color:#d5d7dd;}
/* line 92,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(4) pre{position:absolute;top:50%;left:50%;margin:-220px 0 0 -450px;}
/* line 102,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(5) .content{position:absolute;top:50%;left:50%;margin:-350px 0 0 -450px;}
/* line 108,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(5) h1{color:#333a3e;}
/* line 111,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(5) pre{color:#333a3e;}
/* line 119,/Users/Jonas/Projects/repo/windows/scss/demo/_demo.scss */
.window:nth-child(6) .content{position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;text-align:center;}
/* CSS Document */
/* line 4,/Users/Jonas/Projects/repo/windows/scss/demo/_btn.scss */
::selection{background-color:#55595c;color:#fff;text-shadow:0 1px 0 #000;}
/* line 9,/Users/Jonas/Projects/repo/windows/scss/demo/_btn.scss */
::-moz-selection{background-color:#55595c;color:#fff;text-shadow:0 1px 0 #000;}
/* line 38,/Users/Jonas/Projects/repo/windows/scss/demo/_btn.scss */
#wrap{width:500px;margin:13% auto 0;}
/* line 49,/Users/Jonas/Projects/repo/windows/scss/demo/_btn.scss */
#btn-wrap{position:relative;padding:5px;margin:0 auto;width:230px;height:50px;display:block;text-decoration:none;margin-bottom:30px;background:#242428;background:-webkit-gradient(linear,0 bottom,0 top,from(#2d2d30),to(#17171a));background:-moz-linear-gradient(-90deg,#17171a,#2d2d30);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;-webkit-box-shadow:0 1px 0 #37373b;-moz-box-shadow:0 1px 0 #37373b;box-shadow:0 1px 0 #37373b;}
/* line 69,/Users/Jonas/Projects/repo/windows/scss/demo/_btn.scss */
span.title{color:#d6d6e7;font:15px/49px BrandonText-Bold,Futura,Helvetica,Arial,sans-serif;text-transform:uppercase;height:50px;width:230px;display:block;position:relative;-webkit-box-shadow:0 -1px 0 #8d8d94,0 1px 1px #0b0b0c;-moz-box-shadow:0 -1px 0 #8d8d94,0 1px 1px #0b0b0c;box-shadow:0 -1px 0 #8d8d94,0 1px 1px #0b0b0c;background:#52525c;background:-webkit-gradient(linear,0 bottom,0 top,from(#383840),to(#5a5a64));background:-moz-linear-gradient(-90deg,#5a5a64,#383840);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;z-index:5;-webkit-transition:width .2s ease-out;-moz-transition:width .2s ease-out;-o-transition:width .2s ease-out;text-align:center;}
/* line 93,/Users/Jonas/Projects/repo/windows/scss/demo/_btn.scss */
#btn-wrap:hover span.title{font-size:14px;width:135px;}
/* line 98,/Users/Jonas/Projects/repo/windows/scss/demo/_btn.scss */
#info{position:absolute;height:50px;width:230px;top:5px;right:4px;-webkit-box-shadow:0 -1px 0 #404042,0 1px 1px #0b0b0c;-moz-box-shadow:0 -1px 0 #404042,0 1px 1px #0b0b0c;box-shadow:0 -1px 0 #404042,0 1px 1px #0b0b0c;background:#2a2a2d;background:-webkit-gradient(linear,0 bottom,0 top,from(#212124),to(#2a2a2d));background:-moz-linear-gradient(-90deg,#2a2a2d,#212124);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;z-index:4;}
/* line 116,/Users/Jonas/Projects/repo/windows/scss/demo/_btn.scss */
#info p{width:65px;margin:12px 17px 0 0;position:absolute;right:0;color:#7c7c84;font:11px/12px Helvetica,Arial,sans-serif;text-align:left;}
/* line 126,/Users/Jonas/Projects/repo/windows/scss/demo/_btn.scss */
.boxtuffs{color:#7c7c84;font:12px Helvetica,Arial,sans-serif;text-shadow:0 -1px 0 black;text-decoration:none;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;}
/* line 136,/Users/Jonas/Projects/repo/windows/scss/demo/_btn.scss */
.boxtuffs:hover{color:#27896a;}
/* line 6,../scss/main.scss */
html,body{margin:0;padding:0;}
/* line 11,../scss/main.scss */
.window{width:100%;height:100%;position:absolute;}
/* line 18,../scss/main.scss */
.window:nth-child(1){background:#d5d7dd;top:0%;}
/* line 18,../scss/main.scss */
.window:nth-child(2){background:#1babb7;top:100%;}
/* line 18,../scss/main.scss */
.window:nth-child(3){background:#6ab29f;top:200%;}
/* line 18,../scss/main.scss */
.window:nth-child(4){background:#333a3e;top:300%;}
/* line 18,../scss/main.scss */
.window:nth-child(5){background:#d0482b;top:400%;}
/* line 18,../scss/main.scss */
.window:nth-child(6){background:#231f20;top:500%;}
分享到QQ
分享到微博
微信扫一扫
