mootools_使用MooTools复制jQuery主页工具提示

柔情只为你懂 2023-02-22 01:28 35阅读 0赞

mootools

The jQuery homepage has a pretty suave tooltip-like effect as seen below:

jQuery主页具有类似工具提示的和的效果，如下所示：

![jQuery Homepage][]

Here's how to accomplish this same effect using MooTools.

这是使用MooTools实现相同效果的方法。

[View Demo][] [观看演示][View Demo]

## XHTML **(**The XHTML**)** ##

<div id="jq-intro" class="jq-clearfix">
    	<h2>jQuery is a new kind of JavaScript Library.</h2>
    	<p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development. <strong>jQuery is designed to change the way that you write JavaScript.</strong></p>
    	<ul class="jq-checkpoints jq-clearfix">
    		<li><a href="http://docs.jquery.com/Tutorials" title="Lightweight Footprint" class="jq-thickbox">Lightweight Footprint</a>
    			<div class="jq-checkpointSubhead">
    				<p>About 18KB in size <em>(Minified and Gzipped)</em></p>
    			</div>
    		</li>
    		<li><a href="http://docs.jquery.com/Tutorials" title="CSS3 Compliant" class="jq-thickbox">CSS3 Compliant</a>
    			<div class="jq-checkpointSubhead">
    				<p>Supports CSS 1-3 selectors and more!</p>
    			</div>
    		</li>
    		<li><a href="http://docs.jquery.com/Tutorials" title="Cross-browser" class="jq-thickbox">Cross-browser</a>
    			<div class="jq-checkpointSubhead">
    				<p>IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome</p>
    			</div>
    		</li>
    	</ul>
    </div>

The above XHTML was taken directly from the jQuery homepage -- no changes.

上面的XHTML直接来自jQuery主页-无需更改。

## CSS **(**The CSS**)** ##

#jq-intro 			{ padding-top:1em; width:605px; margin:0 auto; }
    #jq-intro h2 		{ font-size:1.9em; font-weight:bold; color:#5DB0E6; line-height:1em; }
    #jq-intro h2 span.jq-jquery { float:left; width:81px; height:23px; margin-right:.3em; position:relative; }
    #jq-intro h2 span.jq-jquery span { position:absolute; left:-999999px; }
    #jq-intro p 		{ clear:both; font-size:1.5em; margin:5px 0; font-weight:normal; line-height:1.6; }
    #jq-intro ul 		{ padding:1.5em 0; list-style-type:none; }
    #jq-intro li 		{ float:left; font-size:1.4em; }
    #jq-intro li a 	{ color:#5DB0E6; font-weight:bold; text-decoration:underline; float:left; padding:0 30px 0 23px; }
    #jq-intro li p 	{ font-size:12px; }
    #jq-intro li 		{ position:relative; }
    div.jq-checkpointSubhead { display:none; }
    div.jq-checkpointSubhead { /*opacity:0.0001;*/ position:absolute; width:253px; height:54px; background:url(jquery-tooltip.png) 0 0 no-repeat; top:-1.5em; left:-35%; z-index:100; }
    div.jq-checkpointSubhead p { font-size:1em; padding:10px 5px 0 50px; color:#AE0001; font-weight:bold; line-height:1.3em; margin:0; cursor:pointer; }

The above CSS has been slightly modified to match the CSS rules already in place on my demo page.

上面CSS进行了略微修改，以匹配演示页面上已经存在CSS规则。

## MooTools JavaScript **(**The MooTools JavaScript**)** ##

/* moo style */
    window.addEvent('domready',function() {
    	//opacity / display fix
    	$$('.jq-checkpointSubhead').setStyles({
    		opacity: 0,
    		display: 'block'
    	});
    	//put the effect in place
    	$$('.jq-checkpoints li').each(function(el,i) {
    		el.addEvents({
    			'mouseenter': function() {
    				el.getElement('div').fade('in');
    			},
    			'mouseleave': function() {
    				el.getElement('div').fade('out');
    			}
    		});
    	});
    });

[View Demo][] [观看演示][View Demo]

This effect is the epitome of a dynamic yet subtle JavaScript enhancement!

这种效果是动态但微妙JavaScript增强的缩影！

> 翻译自: [https://davidwalsh.name/jquery-homepage-mootools][https_davidwalsh.name_jquery-homepage-mootools]

mootools

[jQuery Homepage]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9qcXVlcnktaG9tZS5wbmc?x-oss-process=image/format,png
[View Demo]: https://davidwalsh.name/demo/jquery-home.php
[https_davidwalsh.name_jquery-homepage-mootools]: https://davidwalsh.name/jquery-homepage-mootools