jquery鼠标经过链接提示资源-CSDN文库

共15个文件

htm：7个

gif：3个

js：3个

5星 · 超过95%的资源需积分: 10 5 浏览量 2010-11-14 14:03:06 上传评论收藏 39KB RAR 举报

在网页设计中，jQuery 是一个非常流行的 JavaScript 库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。"jquery 鼠标经过链接提示"是jQuery的一个常见应用，它允许开发者在用户将鼠标悬停在链接上时显示相关信息，这种交互方式能够提供额外的上下文信息，增强用户体验。实现这一功能的关键在于利用jQuery的事件监听器和自定义数据属性。我们需要在HTML中为链接添加一个特殊的属性，比如"data-tooltip"，用来存储我们想要提示的信息。例如： ```html <a href="http://example.com" class="tooltip" data-tooltip="这是一个示例链接，点击将跳转到示例网站">链接</a> ``` 接下来，我们使用jQuery来监听鼠标悬停事件。当鼠标进入链接时，我们会显示提示信息；当鼠标离开时，提示信息消失。这可以通过`.hover()`方法实现： ```javascript $(document).ready(function() { $('.tooltip').hover(function() { // 鼠标进入 var tooltipContent = $(this).data('tooltip'); showTooltip(tooltipContent, this); }, function() { // 鼠标离开 hideTooltip(); }); }); ``` `showTooltip()`和`hideTooltip()`是两个自定义函数，用于创建和移除提示框。我们可以使用CSS来设计提示框的样式，确保其在鼠标下方适当位置出现： ```css .tooltip-tooltip { position: absolute; background-color: #333; color: #fff; padding: 5px; border-radius: 3px; z-index: 999; display: none; /* 默认隐藏 */ } ``` `showTooltip()`函数会计算鼠标的位置，并将提示框放置在正确的位置： ```javascript function showTooltip(content, element) { var tooltip = $('<div class="tooltip-tooltip">' + content + '</div>'); var pos = $(element).offset(); var width = $(element).outerWidth(); tooltip.css({ top: pos.top + $(element).outerHeight(), left: pos.left + (width / 2) - (tooltip.outerWidth() / 2) }).appendTo('body').fadeIn(); } function hideTooltip() { $('.tooltip-tooltip').fadeOut(function() { $(this).remove(); }); } ``` 这样，当用户将鼠标移到带有"data-tooltip"属性的链接上时，就会看到一个提示框，显示链接的相关信息。这种方法在网页设计中非常实用，可以用于各种场景，如提供链接目标预览、显示附加说明等。在提供的压缩包文件"文字弹出层提示的效果"中，可能包含了实现这一功能的完整代码示例。你可以下载并参考这个示例，以便在自己的项目中实现类似的功能。同时，记得在实际应用中，根据页面布局和设计需求调整提示框的位置、样式以及动画效果，以达到最佳的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

2010090155018037.rar （15个子文件）

文字弹出层提示的效果

css

global.css 3KB

images

loader.gif 958B

ajaxImage.jpg 17KB

arrow_left.gif 102B

arrow_right.gif 102B

ajax3.htm 564B

yahoo.htm 287B

ajax5.htm 353B

ajax4.htm 1KB

jquery.js 16KB

jtip.js 4KB

compressedjquery.js 16KB

index.htm 3KB

ajax.htm 461B

ajax2.htm 1KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jTip - The Jquery Tool Tip</title> <style type="text/css" media="all"> @import "css/global.css"; </style> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jtip.js" type="text/javascript"></script> </head> <body> <div id="contentPad"> <p><strong>Roll over a question mark:</strong></p> <label style="padding-right:5px">Password</label><input name="" type="text" /><span class="formInfo"><a href="ajax.htm?width=375" class="jTip" id="one" name="Password must follow these rules:">?</a></span> <br /> <br /> <label style="padding-right:5px">User ID</label><input name="" type="text" /><span class="formInfo"><a href="ajax2.htm?width=475" class="jTip" id="two" name="">?</a></span> <p><strong>Try adjusting the browser window so the links in the paragraphs below are as close to the right side of the window as possible. Roll over a link in the paragraphs below. This demonstrates how the tool tip will flip horizontally depending upon the space between the tool tip and the right side of the window. Don't worry the script also accounts for the custom widths.</strong></p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut <a href="ajax4.htm?width=475" class="jTip" id="six" name="Window caption or title">Tip With Caption</a> enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu <a href="ajax3.htm?width=375" class="jTip" id="three">Tip No Caption</a> feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut <a href="ajax5.htm" class="jTip" id="four" name="Window caption or title">No Specified Width</a> et dolore magna aliquam erat volutpat.</p> <p><strong>The link below demonstrates a tool tip on a text link that allows for the link to accommodate an additional URL (using a query string). So that a link will functions as expect if clicked. Notice the cursor change.</strong></p> <p><a href="yahoo.htm?width=175&link=http://www.yahoo.com" name="Before You Click..." id="yahooCopy" class="jTip">Go To Yahoo</a></p> </div> </body> </html>

评论收藏

内容反馈