mootools 元素追加
Google recently introduced an interesting effect to their homepage: the top left and top right navigation items don't display until you move your mouse or leave the search term box. Why? I can only speculate that they want their homepage as simple as possible; after all, the search box is given focus immediately and at least half of their users probably just type their term and hit enter -- no need for more clutter. Here's how you can implement a similar system with MooTools or jQuery.
Google最近在其首页上引入了一种有趣的效果：在您移动鼠标或离开搜索词框之前，不会显示左上和右上导航项目。 为什么？ 我只能推测他们希望他们的首页尽可能简单； 毕竟，搜索框会立即得到关注，至少有一半的用户可能只是键入他们的术语并按回车键-无需更多混乱。 这是使用MooTools或jQuery实现类似系统的方法。
HTML (The HTML)
<body>
<div id="fade1" class="fadein">{ fade area 1 }</div>
<div id="fade2" class="fadein">{ fade area 2 }</div>
<div id="fade3" class="fadein">{ fade area 3 }</div>
<!-- other stuff here -->
</body>
Place the HTML where you'd like -- it has no bearing on our system besides needing each element to have the fadein CSS class.
将HTML放置在您想要的位置上-除了需要每个元素都具有fadein CSS类之外，它对我们的系统没有影响。
CSS (The CSS)
@media all {
.fadein { visibility:hidden; }
#fade1 { /* place wherever on the page */ }
#fade2 { /* place wherever on the page */ }
#fade3 { /* place wherever on the page */ }
}
@media handheld {
.fadein { visibility:visible; }
}
The elements that will fade in will need to have their visibility set to hidden. We'll accommodate for the no-JavaScript user below.
淡入的元素需要将其可见性设置为隐藏。 我们将为下面的非JavaScript用户提供服务。
MooTools JavaScript (The MooTools JavaScript)
/* via @appden, Scott Kyle, http://appden.com/javascript/fun-with-custom-events-on-elements-in-mootools/ */
Native.implement([Element, Window, Document, Events], {
oneEvent: function(type, fn) {
return this.addEvent(type, function() {
this.removeEvent(type, arguments.callee);
return fn.apply(this, arguments);
});
}
});
/* make it happen! */
window.addEvent('domready',function() {
var fades = $$('.fadein').setStyle('opacity',0);
var doFadeIn = function(e) {
if(!e.key || e.key == 'tab') {
fades.fade('in');
}
};
$(document.body).oneEvent('mousemove',doFadeIn);
$('s').oneEvent('blur',doFadeIn);
});
When the DOM is ready, we grab all of the elements that are mean to fade in and...get this...fade them in.
当DOM准备就绪时，我们将获取所有将要淡入淡出的元素，并将其淡入。
jQuery JavaScript (The jQuery JavaScript)
$(document).ready(function() {
var doFadeIn = function() {
$('.fadein').css({ opacity:0, visibility:'visible'}).fadeTo(250,1);
};
$('body').one('mousemove',doFadeIn);
$('#s').one('blur',doFadeIn);
});
This is the equivalent jQuery JavaScript code.
这是等效的jQuery JavaScript代码。
适应非JavaScript用户 (Accommodating for No-Javascript Users)
<noscript>
<style type="text/css">
.fadein { visibility:visible; }
</style>
</noscript>
We undo the initial hiding of the elements. Duh.
我们撤消元素的初始隐藏。 咄。
It's a subtle effect but a good idea on Google's part.
这是一个微妙的影响，但对Google来说却是一个好主意。
mootools 元素追加
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
