2. 技术
    3. mootools 元素追加

    mootools 元素追加

    技术2022-07-11  148

    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实现类似系统的方法。

    View MooTools Demo 查看MooTools演示 View jQuery Demo 查看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.

    我们撤消元素的初始隐藏。 咄。

    View MooTools Demo 查看MooTools演示 View jQuery Demo 查看jQuery演示

    It's a subtle effect but a good idea on Google's part.

    这是一个微妙的影响，但对Google来说却是一个好主意。

    翻译自: https://davidwalsh.name/google-fade

    mootools 元素追加

    相关资源：通过Mootools 1.2来操纵HTML DOM元素
    Processed: 0.013, SQL: 9