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

落日映苍穹つ 2023-02-21 14:29 2阅读 0赞

jquery复制

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

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

[![jQuery Tooltips][]][jQuery Tooltips 1]

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][jQuery Tooltips 1] [观看演示][jQuery Tooltips 1]

## 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][jQuery Tooltips 1] [观看演示][jQuery Tooltips 1]

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][https_davidwalsh.name_jquery-tooltips]

jquery复制

[jQuery Tooltips]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9qcXVlcnktaG9tZS5wbmc?x-oss-process=image/format,png
[jQuery Tooltips 1]: https://davidwalsh.name/demo/jquery-tooltips-jquery.php
[MooTools]: https://davidwalsh.name/jquery-homepage-mootools
[Dojo]: https://davidwalsh.name/dojo-tooltips
[https_davidwalsh.name_jquery-tooltips]: https://davidwalsh.name/jquery-tooltips