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创建浮动工具栏
相关资源：jdk-8u281-windows-x64.exe
