the source of jquery.scrollFollow

来源:互联网 发布:东江湖大数据产业园 编辑:程序博客网 时间:2024/06/06 07:12
/** * jquery.scrollFollow.js * Copyright (c) 2008 Net Perspective (http://kitchen.net-perspective.com/) * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php) *  * @author R.A. Ray * * @projectDescriptionjQuery plugin for allowing an element to animate down as the user scrolls the page. *  * @version 0.4.0 *  * @requires jquery.js (tested with 1.2.6) * @requires ui.core.js (tested with 1.5.2) *  * @optional jquery.cookie.js (http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/) * @optional jquery.easing.js (http://gsgd.co.uk/sandbox/jquery/easing/ - tested with 1.3) *  * @param speedint - Duration of animation (in milliseconds) * default: 500 * @param offsetint - Number of pixels box should remain from top of viewport * default: 0 * @param easingstring - Any one of the easing options from the easing plugin - Requires jQuery Easing Plugin < http://gsgd.co.uk/sandbox/jquery/easing/ > * default: 'linear' * @param containerstring - ID of the containing div * default: box's immediate parent * @param killSwitchstring - ID of the On/Off toggle element * default: 'killSwitch' * @param onTextstring - killSwitch text to be displayed if sliding is enabled * default: 'Turn Slide Off' * @param offTextstring - killSwitch text to be displayed if sliding is disabled * default: 'Turn Slide On' * @param relativeTostring - Scroll animation can be relative to either the 'top' or 'bottom' of the viewport * default: 'top' * @param delayint - Time between the end of the scroll and the beginning of the animation in milliseconds * default: 0 */( function( $ ) {$.scrollFollow = function ( box, options ){ // Convert box into a jQuery objectbox = $( box );// 'box' is the object to be animatedvar position = box.css( 'position' );function ani(){// The script runs on every scroll which really means many times during a scroll.// We don't want multiple slides to queue up.box.queue( [ ] );// A bunch of values we need to determine where to animate tovar viewportHeight = parseInt( $( window ).height() );var pageScroll =  parseInt( $( document ).scrollTop() );var parentTop =  parseInt( box.cont.offset().top );var parentHeight = parseInt( box.cont.attr( 'offsetHeight' ) );var boxHeight = parseInt( box.attr( 'offsetHeight' ) + ( parseInt( box.css( 'marginTop' ) ) || 0 ) + ( parseInt( box.css( 'marginBottom' ) ) || 0 ) );var aniTop;// Make sure the user wants the animation to happenif ( isActive ){// If the box should animate relative to the top of the windowif ( options.relativeTo == 'top' ){// Don't animate until the top of the window is close enough to the top of the boxif ( box.initialOffsetTop >= ( pageScroll + options.offset ) ){aniTop = box.initialTop;}else{aniTop = Math.min( ( Math.max( ( -parentTop ), ( pageScroll - box.initialOffsetTop + box.initialTop ) ) + options.offset ), ( parentHeight - boxHeight - box.paddingAdjustment ) );}}// If the box should animate relative to the bottom of the windowelse if ( options.relativeTo == 'bottom' ){// Don't animate until the bottom of the window is close enough to the bottom of the boxif ( ( box.initialOffsetTop + boxHeight ) >= ( pageScroll + options.offset + viewportHeight ) ){aniTop = box.initialTop;}else{aniTop = Math.min( ( pageScroll + viewportHeight - boxHeight - options.offset ), ( parentHeight - boxHeight ) );}}// Checks to see if the relevant scroll was the last one// "-20" is to account for inaccuracy in the timeoutif ( ( new Date().getTime() - box.lastScroll ) >= ( options.delay - 20 ) ){box.animate({top: aniTop}, options.speed, options.easing);}}};// For user-initiated stopping of the slidevar isActive = true;if ( $.cookie != undefined ){if( $.cookie( 'scrollFollowSetting' + box.attr( 'id' ) ) == 'false' ){var isActive = false;$( '#' + options.killSwitch ).text( options.offText ).toggle( function (){isActive = true;$( this ).text( options.onText );$.cookie( 'scrollFollowSetting' + box.attr( 'id' ), true, { expires: 365, path: '/'} );ani();},function (){isActive = false;$( this ).text( options.offText );box.animate({top: box.initialTop}, options.speed, options.easing);$.cookie( 'scrollFollowSetting' + box.attr( 'id' ), false, { expires: 365, path: '/'} );});}else{$( '#' + options.killSwitch ).text( options.onText ).toggle( function (){isActive = false;$( this ).text( options.offText );box.animate({top: box.initialTop}, 0);$.cookie( 'scrollFollowSetting' + box.attr( 'id' ), false, { expires: 365, path: '/'} );},function (){isActive = true;$( this ).text( options.onText );$.cookie( 'scrollFollowSetting' + box.attr( 'id' ), true, { expires: 365, path: '/'} );ani();});}}// If no parent ID was specified, and the immediate parent does not have an ID// options.container will be undefined. So we need to figure out the parent element.if ( options.container == ''){box.cont = box.parent();}else{box.cont = $( '#' + options.container );}// Finds the default positioning of the box.box.initialOffsetTop =  parseInt( box.offset().top );box.initialTop = parseInt( box.css( 'top' ) ) || 0;// Hack to fix different treatment of boxes positioned 'absolute' and 'relative'if ( box.css( 'position' ) == 'relative' ){box.paddingAdjustment = parseInt( box.cont.css( 'paddingTop' ) ) + parseInt( box.cont.css( 'paddingBottom' ) );}else{box.paddingAdjustment = 0;}// Animate the box when the page is scrolled$( window ).scroll( function (){// Sets up the delay of the animation$.fn.scrollFollow.interval = setTimeout( function(){ ani();} , options.delay );// To check against right before setting the animationbox.lastScroll = new Date().getTime();});// Animate the box when the page is resized$( window ).resize( function (){// Sets up the delay of the animation$.fn.scrollFollow.interval = setTimeout( function(){ ani();} , options.delay );// To check against right before setting the animationbox.lastScroll = new Date().getTime();});// Run an initial animation on page loadbox.lastScroll = 0;ani();};$.fn.scrollFollow = function ( options ){options = options || {};options.relativeTo = options.relativeTo || 'top';options.speed = options.speed || 500;options.offset = options.offset || 0;options.easing = options.easing || 'swing';options.container = options.container || this.parent().attr( 'id' );options.killSwitch = options.killSwitch || 'killSwitch';options.onText = options.onText || 'Turn Slide Off';options.offText = options.offText || 'Turn Slide On';options.delay = options.delay || 0;this.each( function() {new $.scrollFollow( this, options );});return this;};})( jQuery );

原创粉丝点击