mootools_MooTools ScrollSpy简介

最新推荐文章于 2024-10-03 09:00:56 发布

culuo8053

最新推荐文章于 2024-10-03 09:00:56 发布

阅读量117

点赞数

文章标签： js python java css html ViewUI

原文链接：https://davidwalsh.name/mootools-scrollspy

版权

mootools

I've been excited to release this plugin for a long time. MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific functionality with just a few simple parameters.

很长时间以来我一直很高兴能发布此插件。 MooTools ScrollSpy是一个独特但简单的MooTools插件，它侦听页面滚动并根据用户在页面中的滚动位置触发事件。现在，您只需几个简单的参数即可启动特定功能。

View Demo 1 查看演示1 View Demo 2 查看演示2 View Demo 3 查看演示3 View Demo 4 查看演示4 Download 下载

MooTools JavaScript类 (The MooTools JavaScript Class)


/* scroll spy plugin / class */
var ScrollSpy = new Class({
	
	/* implements */
	Implements: [Options,Events],

	/* options */
	options: {
		min: 0,
		mode: 'vertical',
		max: 0,
		container: window,
		onEnter: $empty,
		onLeave: $empty,
		onTick: $empty
	},
	
	/* initialization */
	initialize: function(options) {
		/* set options */
		this.setOptions(options);
		this.container = $(this.options.container);
		this.enters = this.leaves = 0;
		this.max = this.options.max;
		
		/* fix max */
		if(this.max == 0) 
		{ 
			var ss = this.container.getScrollSize();
			this.options.max = this.options.mode == 'vertical' ? ss.y : ss.x;
		}
		/* make it happen */
		this.addListener();
	},
	
	/* a method that does whatever you want */
	addListener: function() {
		/* state trackers */
		this.inside = false;
		this.container.addEvent('scroll',function() {
			/* if it has reached the level */
			var position = this.container.getScroll();
			var xy = this.options.mode == 'vertical' ? position.y : position.x;
			/* if we reach the minimum and are still below the max... */
			if(xy >= this.options.min && xy &Lt;= this.max) {
					/* trigger Enter event if necessary */
					if(!this.inside) {
						/* record as inside */
						this.inside = true;
						this.enters++;
						/* fire enter event */
						this.fireEvent('enter',[position,this.enters]);
					}
					/* trigger the "tick", always */
					this.fireEvent('tick',[position,this.inside,this.enters,this.leaves]);
			}
			else {
				/* trigger leave */
				if(this.inside) 
				{
					this.inside = false;
					this.leaves++;
					this.fireEvent('leave',[position,this.leaves]);
				}
			}
		}.bind(this));
	}
});

Options for ScrollSpy include:

ScrollSpy的选项包括：

min: (defaults to 0) The minimum value of the X or Y coordinate, depending on mode.
最小值：( 默认为 0) X或Y坐标的最小值，取决于模式。
max: (defaults to 0) The maximum value of the X or Y coordinate, depending on mode.
最大值：( 默认为 0) X或Y坐标的最大值，取决于模式。
mode: (defaults to 'vertical') Defines whether to listen to X or Y scrolling.
模式：( 默认为“垂直”)定义是否收听X或Y滚动。
container: (defaults to window) The element whose scrolling to listen to.
container ：( 默认为window)要滚动收听的元素。

Events for ScrollSpy include:

ScrollSpy的事件包括：

Tick: Fires on each scroll event within the min and max parameters. Receives as parameters:
勾号：在min和max参数内的每个滚动事件上触发。接收为参数：
- position: an object with the current X and Y position.
  position：当前X和Y位置的对象。
- inside: a Boolean value for whether or not the user is within the min and max parameters
  inside：布尔值，表示用户是否在min和max参数内
- enters: the number of times the min / max has been entered.
  输入：输入最小/最大次数。
- leaves: the number of times the min / max has been left.
  离开：最小/最大剩余次数。
Enter: Fires every time the user enters the min / max zone.
输入：每当用户进入最小/最大区域时触发。
- position: an object with the current X and Y position.
  position：当前X和Y位置的对象。
- enters: the number of times the min / max has been entered.
  输入：输入最小/最大次数。
Leave: Fires every time the user leaves the min / max zone.
离开：每当用户离开最小/最大区域时触发。
- position: an object with the current X and Y position.
  position：当前X和Y位置的对象。
- leaves: the number of times the min / max has been left.
  离开：最小/最大剩余次数。

So now that we have the basics down, lets check out some example usages.

现在，我们已经掌握了基础知识，让我们看一些示例用法。

示例1：“从顶部到顶部” (Example 1: "Top the Top")

In this example, when you scroll down a defined number of pixels, you get a "Scroll to Top" link in the lower right hand part of the screen. When you're back at the top, ScrollSpy is directed to hide the link.

在此示例中，当您向下滚动定义的像素数时，您会在屏幕的右下方获得“滚动到顶部”链接。当您回到顶部时，将指示ScrollSpy隐藏链接。

XHTML (The XHTML)


<a href="#top" id="gototop" class="no-click no-print">Top of Page</a>

CSS (The CSS)


#gototop			{ display:none; font-weight:bold; font-family:tahoma; font-size:10px; width:70px; background:url(/wp-content/themes/walshbook/images/add_content_spr.gif) 5px -8px no-repeat #eceff5; color:#3b5998; font-size:11px; text-decoration:none; position:fixed; right:5px; bottom:5px; padding:7px 7px 7px 20px; }
#gototop:hover	{ text-decoration:underline; }

MooTools / ScrollSpy JavaScript (The MooTools / ScrollSpy JavaScript)


window.addEvent('domready',function() {
	/* smooth */
	new SmoothScroll({duration:500});
	
	/* link management */
	$('gototop').set('opacity','0').setStyle('display','block');
	
	/* scrollspy instance */
	var ss = new ScrollSpy({
		min: 200,
		onEnter: function(position,state,enters) {
			$('gototop').fade('in');
		},
		onLeave: function(position,state,leaves) {
			$('gototop').fade('out');
		},
		container: window
	});
});

View Demo 1 观看演示1

示例2：“表演” (Example 2: "The Show")

When you click the link in this example, the window scrolls to the right. During the scrolling process, ScrollSpy shows and hides content blocks based on where in the scrolling process the window is.

在此示例中单击链接时，窗口将滚动到右侧。在滚动过程中，ScrollSpy根据窗口在滚动过程中的位置显示和隐藏内容块。

XHTML (The XHTML)


<!-- SLIDER 1 -->
<div style="position:relative; height:400px;">
<div id="slider1" class="slider" style="margin-left:1000px;">
	<h2>ScrollSpy!</h2>
	<p>
		ScrollSpy is a new plugin that watches where you scroll and allows
		you to perform actions based on the the position of the given
		element!
	</p>
</div>
<!-- SLIDER 2 -->
<div id="slider2" class="slider" style="margin-left:1600px;">
	<h2>ScrollSpy 2!</h2>
	<p>
		Another area!
	</p>
</div>
<!-- SLIDER 3 -->
<div id="slider3" class="slider" style="margin-left:2200px;">
	<h2>ScrollSpy 3!</h2>
	<p>
		You've met another criteria!!
	</p>
</div>
<!-- SLIDER 4 -->
<div id="slider4" class="slider" style="margin-left:2800px;">
	<h2>ScrollSpy 4!</h2>
	<p>
		You've met the last criteria!!
	</p>
</div>
<div style="clear:both;"></div>
</div>
<!-- RIGHT-MOST AREA -->
<div style="float:right;" id="right2"> </div>

CSS (The CSS)


.slider { padding:10px; background:#eee; width:300px; height:300px; float:left; z-index:500; }

MooTools / ScrollSpy JavaScript (The MooTools / ScrollSpy JavaScript)


window.addEvent('domready',function() {
	
	/* sliders */
	var slide1 = new Fx.Slide('slider1',{
		duration: 400,
		wheelStops: false
	});
	slide1.hide();
	var slide2 = new Fx.Slide('slider2',{
		duration: 400,
		wheelStops: false
	});
	slide2.hide();
	var slide3 = new Fx.Slide('slider3',{
		duration: 200,
		wheelStops: false
	});
	slide3.hide();
	var slide4 = new Fx.Slide('slider4',{
		duration: 200,
		wheelStops: false
	});
	slide4.hide();
	
	/* scrollspy instance */
	var ss1 = new ScrollSpy({
		min: 400,
		max: 700,
		onEnter: function(position,state,enters) {
			slide1.slideIn();
		},
		onLeave: function(position,state,leaves) {
			slide1.slideOut();
		},
		container: window,
		mode: 'horizontal'
	});
	
	/* scrollspy instance */
	var ss2 = new ScrollSpy({
		min: 900,
		max: 1500,
		onEnter: function(position,state,enters) {
			slide2.slideIn();
		},
		onLeave: function(position,state,leaves) {
			slide2.slideOut();
		},
		container: window,
		mode: 'horizontal'
	});
	
	/* scrollspy instance */
	var ss3 = new ScrollSpy({
		min: 1500,
		max: 2300,
		onEnter: function(position,state,enters) {
			slide3.slideIn();
		},
		onLeave: function(position,state,leaves) {
			slide3.slideOut();
		},
		container: window,
		mode: 'horizontal'
	});
	
	/* scrollspy instance */
	var ss4 = new ScrollSpy({
		min: 2200,
		max: 2500,
		onEnter: function(position,state,enters) {
			slide4.slideIn();
		},
		onLeave: function(position,state,leaves) {
			slide4.slideOut();
		},
		container: window,
		mode: 'horizontal'
	});
	
	/* left to right scroll */
	$('show2').addEvent('click',function(e) {
		e.stop();
		var to = $('right2').getPosition();
		to.y = 0; to.x = to.x - 300;
		var scroll = new Fx.Scroll(window,{
			duration: 20000,
			offset: to
		}).start();
	});
	
	
});

View Demo 2 查看演示2

示例3：“团队颜色” (Example 3: "Team Colors")

This basic example displays a different background color depending on where you are in the page.

此基本示例根据您在页面中的位置显示不同的背景色。

XHTML (The XHTML)


<div id="white" class="color"><h2>The White Nation</h2></div>
<div id="red" class="color"><h2>The Red Nation</h2></div>
<div id="blue" class="color"><h2>The Blue Nation</h2></div>
<div id="green" class="color"><h2>The Green Nation</h2></div>
<div id="black" class="color"><h2>The Black Nation</h2></div>

CSS (The CSS)


.red		{ background:#f00; }
.blue		{ background:#00f; }
.green	{ background:#008000; }
.black	{ background:#000; color:#fff; }
.color	{ height:400px; }

MooTools / ScrollSpy JavaScript (The MooTools / ScrollSpy JavaScript)


window.addEvent('domready',function() {
	var colors = $$('.color');
	colors.each(function(color,i) {
		var pos = color.getCoordinates();
		var ss = new ScrollSpy({
			min: pos.top,
			max: pos.bottom,
			onEnter: function() {
				$$('div.content').setStyle('background-color',color.get('id'));
			}
		});
	});
});

View Demo 3 观看演示3

示例4：“位置指针” (Example 4: "Position Pointer")

Starring world television actor Peter Griffin, this example displays imagery in different positions on the page based upon where the user scrolls.

由世界电视演员彼得·格里芬(Peter Griffin)主演，此示例根据用户滚动的位置在页面上的不同位置显示图像。

XHTML (The XHTML)


<div class="zone">
	<h2>Area 1</h2>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p>
</div>

<div style="float:right;" class="zone right">
	<h2>Area 2</h2>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p>
</div>
<div style="clear:both;"></div>

<div class="zone">
	<h2>Area 3</h2>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p>
</div>

CSS (The CSS)


.zone	{ width:500px; }

MooTools / ScrollSpy JavaScript (The MooTools / ScrollSpy JavaScript)


window.addEvent('domready',function() {
	/* collect zones */
	var zones = $$('div.zone');
	var imageOffset = { x: 200, y: 50 };
	var posOffset = { x: 0, y: -150 }
	
	/* scroll spy */
	zones.each(function(zone, i) {
		var pos = zone.getCoordinates();
		var right = zone.hasClass('right');
		var peter = new Element('img',{
			opacity: 0,
			src: right ? '/demo/peter-left.jpg' : '/demo/peter-right.jpg',
			styles: {
				position: 'absolute',
				top: pos.top + imageOffset.y,
				left: right ? pos.left - imageOffset.x - 100 : pos.right + imageOffset.x
			}
		}).inject(document.body);
		
		var spy = new ScrollSpy({
			min: pos.top + posOffset.y,
			max: pos.bottom + posOffset.y,
			onEnter: function(position) {
				peter.fade('in');
			},
			onLeave: function(position) {
				peter.fade('out');
			}
		});
	});
});

View Demo 1 查看演示1 View Demo 2 查看演示2 View Demo 3 查看演示3 View Demo 4 查看演示4 Download 下载

ScrollSpy gives you a great amount of functionality within a small plugin. Coming soon: ScrollSpy LazyLoad and ScrollSpy LoadMore! Please share ideas and comments!

ScrollSpy在一个小插件中为您提供了大量功能。即将推出：ScrollSpy LazyLoad和ScrollSpy LoadMore！请分享想法和评论！