mootools 元素追加_MooTools狂野：元素闪烁

最新推荐文章于 2024-10-16 16:26:58 发布

culuo8053

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量102

点赞数

文章标签： javascript python js html5 css3 ViewUI

原文链接：https://davidwalsh.name/mootools-gone-wild-implement-element-flashing

版权

mootools 元素追加

If you're like me and lay awake in bed at night, you've flipped on the TV and seen the commercials: misguided, attention-starved college girls fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Attention, of course. That got me to thinking -- I should go download some what about when we want a user's attention to focus on a specific element on the page without using cheesy graphics? Armed with the latest MooTools trunk and a dream, I've implemented flash(), which you can use on any element on the page.

如果您像我一样，晚上躺在床上醒着，那么您已经在电视上翻了翻，看到了商业广告：被误导，注意力不集中的女大学生因酗酒而生的燃料，在春假期间闪烁着la脚的摄像头，毁了他们的未来。他们为什么这样做？注意，当然。这让我开始思考-当我们希望用户的注意力集中在页面上的特定元素而不使用俗气的图形时，我应该去下载一些相关内容？有了最新的MooTools干线和一个梦想，我实现了flash() ，您可以在页面上的任何元素上使用它。

View Demo 观看演示

XHTML (The XHTML)


<div id="flash-me">
	<a href="javascript:;" id="flash-link">Click here</a> to make me flash!
</div>

The above is just some sample XHTML -- you can make your XHTML code look however you want.

上面只是一些XHTML示例-您可以根据需要使XHTML代码看起来像。

MooTools JavaScript (The MooTools JavaScript)

Element.implement({
	flash: function(to,from,reps,prop,dur) {
		
		//defaults
		if(!reps) { reps = 1; }
		if(!prop) { prop = 'background-color'; }
		if(!dur) { dur = 250; }
		
		//create effect
		var effect = new Fx.Tween(this, {
				duration: dur,
				link: 'chain'
			})
		
		//do it!
		for(x = 1; x <= reps; x++) {
			effect.start(prop,from,to).start(prop,to,from);
		}
	}
});

You feed the flash function 2-5 parameters:

您输入Flash函数2-5参数：

From: The color you want the element to flash to first.
自：希望元素首先闪烁的颜色。
To: The color you want the element to flash to next.
到：您希望元素闪烁到的颜色。
Reps: Number of times to repeat the flash.
重复次数：重复闪光的次数。
Property: Property to flash. Background color works best.
属性：要闪烁的属性。背景颜色效果最佳。
Duration: The duration of the color change
持续时间：颜色变化的持续时间

Slick and simple!

光滑而简单！

用法 (The Usage)


/* flash on click */
$('flash-link').addEvent('click', function () {
	$('flash-me').flash('#fff','#fffea1',5,'background-color',500);
});

/* flash on ajax complete */
$('flash-link-ajax').addEvent('click', function () {
	//make the ajax call
	var req = new Request({
		method: 'get',
		url: 'element-flashing.php',
		data: { 'do' : '1' },
		onRequest: function() {  },
		onComplete: function(response) {
			$('flash-me-ajax').set('text',response).flash('#fff','#fffea1',5,'background-color',500); 
		}
	}).send();
	
});

/* flash on scroll completion */
$('flash-link-scroll').addEvent('click', function() {
	var scroller = new Fx.Scroll(window, {
		onComplete: function() {
			$('scroll-to-me').flash('#fff','#fffea1',10);
		}
	}).toElement('scroll-to-me');
});

There are three examples above. The first makes an element flash right when it's clicked. The second flashes when an AJAX request is complete. The third scrolls down to an element on the page and flashes upon arrival.

上面有三个示例。第一个使元素在单击时立即闪烁。当AJAX请求完成时，第二个指示灯闪烁。第三个向下滚动到页面上的元素，并在到达时闪烁。

View Demo 观看演示