dojo创建浮动工具栏_使用Dojo创建一个简单的新闻滚动器

dojo创建浮动工具栏

My journey into Dojo JavaScript has been exciting and I'm continuing to learn more as I port MooTools scripts to Dojo. My latest experiment is porting a simple new scroller from MooTools to Dojo. The code is very similar!

我进入Dojo JavaScript的过程令人兴奋，当我将MooTools脚本移植到Dojo时，我将继续学习更多。 我的最新实验是将一个简单的新滚动条从MooTools移植到Dojo。 代码非常相似！

View Demo 观看演示

HTML (The HTML)

<div id="news-feed">
	<ul>
		<li><strong style="font-size:14px;">News Item 1</strong><br />Pellentesque habitant morbi...<a href="#">Read More</a></li>
		<li><strong style="font-size:14px;">News Item 2</strong><br />Pellentesque habitant morbi...<a href="/news/2">Read More</a></li>
		<!-- more.... -->
	</ul>
</div>

The news items are placed into list items. The UL will be the element that's animated.

新闻项目被放入列表项目。 UL将成为动画元素。

CSS (The CSS)

#news-feed	 { height:200px; width:300px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee; }
#news-feed ul	{ position:absolute; top:0; left:0; list-style-type:none; padding:0; margin:0; }
#news-feed ul li { min-height:180px; font-size:12px; margin:0; padding:10px; overflow:hidden; }

The absolute positioning is essential to proper animation. Unlike my MooTools example, this example no longer requires a fixed height for each news item. I did add a minimum height so only one item shows up within the scroller window at a time.

绝对定位对于正确的动画至关重要。 与我的MooTools示例不同，此示例不再为每个新闻项要求固定高度。 我确实添加了最小高度，所以一次只在滚动窗口中显示一个项目。

Dojo JavaScript (The Dojo JavaScript)

dojo.require('dojo.NodeList-fx');
dojo.addOnLoad(function() {
	/* settings */
	var list = dojo.query('#news-feed ul'),
		items = list.query("li"),
		showDuration = 3000,
		scrollDuration = 500,
		scrollTopDuration = 200,
		index = 0,
		interval;

	/* movement */
	var start = function() { interval = setInterval(move,showDuration); };
	var stop = function() { if(interval) clearInterval(interval); };
	var reset = function() {
	    list.anim({ top: 0}, scrollTopDuration, null, start);
	};
	/* action! */
	var move = function() {
	    list.anim({ top: (0 - (dojo.coords(items[++index]).t)) }, scrollDuration, null, function(){
			if(index == items.length - 1) {
				index = 0-1;
				stop();
				setTimeout(reset,showDuration);
			}
	    });
	};

	/* stop and start during mouseenter, mouseleave  */
	list.onmouseenter(stop).onmouseleave(start);

	/* go! */
	start();
});

This is where I have the epic description...but the above code (at least for MooTools users) should look familiar. The logic is exactly the same but the code uses dojo.* methods instead of MooTools' Fx, $$, $, and Element.Dimensions methods.

这是我的史诗描述...但是上面的代码(至少对于MooTools用户而言)应该很熟悉。 逻辑完全相同，但是代码使用dojo。*方法代替MooTools的Fx ， $$ ， $和Element.Dimensions方法。

MooTools JavaScript (The MooTools JavaScript)

window.addEvent('domready',function() {
	/* settings */
	var list = $('news-feed').getFirst('ul');
	var items = list.getElements('li');
	var showDuration = 3000;
	var scrollDuration = 500;
	var index = 0;
	var height = items[0].getSize().y;
	/* action func */
	var move = function() {
		list.set('tween',{
			duration: scrollDuration,
			onComplete: function() {
				if(index == items.length - 1) {
					index = 0 - 1;
					list.scrollTo(0,0);
				}
			}
		}).tween('top',0 - (++index * height));
	};
	/* go! */
	window.addEvent('load',function() {		
		move.periodical(showDuration);
	});
});

The above code was taken from my original post. Take a moment to compare the Dojo and MooTools code.

上面的代码摘自我的原始帖子。 花一点时间比较Dojo和MooTools代码。

View Demo 观看演示

What do you think? Three Dojo posts in -- what are your thoughts about Dojo to this point?

你怎么看？ Dojo中的三篇文章-到目前为止，您对Dojo有何看法？

翻译自: https://davidwalsh.name/news-scroller-dojo

dojo创建浮动工具栏