jquery复制_复制jQuery主页工具提示

jquery复制

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

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

The amount of jQuery required to duplicate this effect is next to nothing;  in fact, there's more CSS than there is jQuery code!  Let's explore how we can duplicate jQuery's tooltip effect.

复制此效果所需的jQuery数量几乎为零； 实际上，CSS比jQuery代码更多！ 让我们探讨如何复制jQuery的工具提示效果。

View Demo 观看演示

HTML (The HTML)

The overall structure includes a wrapping DIV element with each tooltip link featured in a list:

总体结构包括一个包装DIV元素，列表中列出了每个工具提示链接：

<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>

Note that the UL element has been given a jq-checkpoints CSS class -- we'll use that in a selector for both CSS styling and element collection using jQuery.

请注意，已为UL元素提供了一个jq-checkpoints CSS类-我们将在选择器中使用它来使用jQuery进行CSS样式和元素收集。

CSS (The CSS)

Like I said...there's more CSS than there will be jQuery code:

就像我说的... CSS比jQuery代码要多：

#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; 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; }

Most of the CSS is gloss for the overall look.  The important piece is the jq-checkpointSubhead CSS class being positioned absolutely and with an initial display value of none.  That will allow us to use the :hidden selector within jQuery.

大多数CSS都具有整体外观的光泽。 重要的一点是jq-checkpointSubhead CSS类是绝对放置的，初始显示值为none。 这将使我们能够在jQuery中使用：hidden选择器。

jQuery JavaScript (The jQuery JavaScript)

And now for the jQuery JavaScript:

现在使用jQuery JavaScript：

jQuery(document).ready(function() {
	var duration = 500;
	jQuery('.jq-checkpoints li').hover(
		function(){ jQuery(this).find('div.jq-checkpointSubhead:hidden').fadeIn(duration); },
		function(){ jQuery(this).find('div.jq-checkpointSubhead:visible').fadeOut(duration); }
	);
});

When the use hovers over the list items, the tooltip for the given list item fades in.  When the user leaves the list item, the tooltip fades out.

当用户将鼠标悬停在列表项上时，给定列表项的工具提示会淡入。当用户离开列表项时，工具提示会逐渐消失。

View Demo 观看演示

There you have it.  If you're interested in how to do this with out JavaScript frameworks, read my MooTools and Dojo tutorials!

你有它。 如果您对没有JavaScript框架的方法感兴趣，请阅读我的MooTools和Dojo教程！

翻译自: https://davidwalsh.name/jquery-tooltips

jquery复制