jQuery仿QQ邮箱的设置成功提示（顶部绿色提示）资源-CSDN文库

共2个文件

html：1个

js：1个

4星 · 超过85%的资源需积分: 10 152 浏览量 2009-08-31 19:12:59 上传评论收藏 20KB RAR 举报

在本文中，我们将深入探讨如何使用jQuery来实现一个类似于QQ邮箱中的设置成功提示功能，这是一种在用户完成某个操作后给予即时反馈的人性化设计。这种提示通常以绿色条状显示在页面顶部，并在一段时间后自动消失，提高了用户体验。我们需要理解jQuery的基本用法。jQuery是一个JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画制作等任务。在实现这个提示功能时，我们主要会用到它的选择器、CSS操作以及定时器功能。 1. **HTML结构**：在HTML中，我们需要创建一个用于显示提示信息的元素。例如，我们可以创建一个`<div>`元素，将其类名设置为"top-alert"，以便于在CSS中定义样式： ```html <div id="top-alert" class="top-alert"></div> ``` 2. **CSS样式**：为了模仿QQ邮箱的绿色提示效果，我们需要在CSS中定义相应的颜色、位置和动画效果。例如： ```css .top-alert { background-color: #4CAF50; /* 绿色 */ color: white; padding: 10px 20px; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; opacity: 0; /* 初始透明度为0，用于渐显动画 */ transition: opacity 0.5s ease-in-out; /* 动画过渡效果 */ } ``` 3. **jQuery实现**：当用户完成某个操作（如点击保存设置按钮）时，我们可以通过jQuery来显示提示信息。将提示信息插入到`#top-alert`元素中，然后通过`.fadeIn()`方法使其逐渐显现，最后设置一个定时器，在一段时间后调用`.fadeOut()`方法使其淡出： ```javascript $('#saveSettings').click(function() { var alertMessage = '设置已成功保存！'; $('#top-alert').text(alertMessage).stop().fadeIn(500); // 显示提示并渐显 setTimeout(function() { $('#top-alert').fadeOut(500, function() { // 渐隐提示 $(this).text(''); // 清空提示内容 }); }, 2000); // 2秒后消失 }); ``` 4. **事件绑定**：需要确保在页面加载完成后，上述jQuery代码才能执行。这可以通过`$(document).ready()`函数实现： ```javascript $(document).ready(function() { // 上述代码放在这里 }); ``` 5. **实际应用**：将上述HTML、CSS和JavaScript代码整合到你的项目中，当用户触发保存设置的事件时，就会看到一个绿色的提示信息在页面顶部出现，几秒钟后自动消失。通过这样的实现，我们可以为用户提供更加友好的交互体验，使他们能够清晰地了解到操作结果。这个简单的jQuery技巧在各种类型的网页应用中都十分实用，无论是小型项目还是大型系统，都能提升用户的满意度。

资源推荐

资源详情

资源评论

收起资源包目录

.rar （2个子文件）

顶部提示

demo.html 2KB

jquery-1.3.2.min.js 56KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <style type="text/css">  </style> <script type="text/javascript"> $(document).ready(function(){ $(":button").css({"border":"solid 1px #999","margin-top":"10px","padding":"3px 5px 0"}); $(":button").click(function(){ if($(":checkbox").is(":checked")){ alert("你可以进行下一步操作了..."); } else{ $(".tips").css("visibility","visible"); setTimeout(function(){$(".tips").css("visibility","hidden");},5000); } }) }) </script> </head> <body> <div class="main"> <div class="tips">请选择你要操作的用户！</div> <table> <col style="text-align:center;" /> <col span="3" /> <tr> <td width="34"><input type="checkbox" /></td> <td width="166">张三</td> <td width="100">20</td> <td width="100">汉族</td> </tr> <tr> <td><input type="checkbox" /></td> <td>令狐冲</td> <td>22</td> <td width="100">汉族</td> </tr> <tr> <td><input type="checkbox" /></td> <td>黄蓉</td> <td width="100">20</td> <td width="100">汉族</td> </tr> <tr> <td><input type="checkbox" /></td> <td>松江</td> <td>22</td> <td width="100">汉族</td> </tr> <tr> <td><input type="checkbox" /></td> <td>白素贞</td> <td width="100">20</td> <td width="100">汉族</td> </tr> <tr> <td><input type="checkbox" /></td> <td>许仙</td> <td>22</td> <td width="100">汉族</td> </tr> </table> <div><input type="button" value="更改" /></div> </div> </body> </html>

评论收藏

内容反馈