index.html文件
<!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>
<title>徐徐升起的qq消息框</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/win.js" type="text/javascript"></script>
<link type="text/css" rel="Stylesheet" href="css/win.css" />
</head>
<body>
<a id="btnShow" href="#">显示消息框</a>
<div id="win">
<div id="title">qq消息框<span id="close"> X</span></div>
<div id="con"><a href="http://long546324.iteye.com">欢迎访问我的Blog</a></div>
</div>
</body>
</html>
win.css文件
html
{
height: 100%;
}
#win
{
border:solid 1px red;
height:150px;
width:200px;
position:absolute;
bottom: -150px;
right:20px;
display:none;
}
#title
{
background-color:blue;
color:yellow;
padding-left:5px;
}
#title #close
{
margin-left:100px;
cursor:pointer;
}
#con
{
padding:30px 0px 0px 30px;
}
win.js文件
$(function(){
$("#win").css("opacity", 0);
$("#btnShow").click(showwin);
$("#close").click(hide);
});
function showwin(){
//找到所对应的div节点
var win=$("#win");
//让该窗口显示出来
win.css("display","block");
//从下往上慢慢升起
win.animate({
bottom: "-1px",
opacity: 1
},1000);
}
function hide()
{
//找到所对应的div节点
var win=$("#win");
//让该窗口隐藏起来
win.animate({
bottom: "-150px",
opacity: 0
},1000);
}
分享到：
- 2009-07-24 15:59
- 浏览 1817
- 评论(9)
- 论坛回复 / 浏览 (4 / 10228)
- 查看更多
相关推荐
在“jQuery实现徐徐升起的qq消息框”这个主题中，我们将探讨如何利用jQuery来创建一种类似QQ消息框的效果，即消息框会从页面底部缓慢升起，以吸引用户的注意力。以下是对这一技术的详细解释： 1. **基本结构**：...
《使用jQuery实现仿QQ消息框的详细教程》 在网页开发中，为了提供更好的用户体验，开发者经常需要创建各种各样的提示、警告或消息框。QQ消息框因其简洁、易用和美观的特点，被广泛应用于各个网站。本教程将详细介绍...
本文将详细讲解如何利用jQuery实现淡入淡出的消息框，这是一个非常实用的功能，常用于向用户展示通知、警告或确认信息。 首先，淡入淡出效果是通过jQuery的动画功能实现的，主要涉及到`fadeIn()`和`fadeOut()`两个...
jQuery UI Messager是一款基于jQuery和jQuery UI库的插件，用于在Web应用程序中创建美观、功能丰富的消息框。它提供了一种优雅的方式来显示各种类型的通知，如警告、错误、信息和成功消息，增强了用户交互体验。这个...
**jQuery实现消息提示框** 在Web开发中，用户交互是必不可少的部分，而消息提示框则是与用户进行简单信息交流的常见方式。jQuery，一个广泛使用的JavaScript库，提供了丰富的API来帮助开发者实现各种功能，包括创建...
本教程将深入探讨如何使用jQuery实现一种即时消息提醒功能，即当页面上有新消息时，能自动弹出一个通知框。我们将讨论以下几个关键知识点： 1. **jQuery基本用法**：首先，确保在HTML文档中引入jQuery库。通常，这...
本文将详细探讨如何利用jQuery实现一个绚丽的弹出消息窗口。 首先，理解jQuery的基本语法是实现这一功能的基础。jQuery的核心概念是选择器（Selector），它用于定位HTML文档中的元素。例如，“$(‘#id’)”会选择ID...
一个js的方法，调用该js可实现下拉复选框。 /**//** * Creat date 2011-11-10 * Creat by zhuoyueping *支持input表单的下拉复选框。 *使用方法： * (1)调用js函数：setSelectBox(textItem, myArray); *...
在本项目中，jQuery是实现动态消息提示框的关键工具。 `消息提醒`是用户界面设计中的一个重要元素，用于向用户传达重要信息或反馈操作结果。在屏幕右下角展示这样的提醒，是一种常见的设计模式，因为它不会干扰用户...
1. **动画效果**：消息框从屏幕底部升起的过程应该有平滑的过渡动画，可以使用CSS3的transition属性或者JavaScript的动画库（如jQuery的animate方法）来实现。动画的时长和速度要适中，既能吸引用户注意，又不会过于...
在本教程中，我们将探讨如何利用jQuery实现右下角的消息提示框功能，这在Web应用程序中非常常见，用于向用户显示通知、警告或确认信息。 首先，我们需要理解jQuery的核心概念。jQuery通过选择器来选取HTML元素，...
接下来，我们需要编写Jquery代码来实现消息框的功能。我们可以定义一个函数，接受消息内容作为参数，然后使用`.html()`设置消息，`.fadeIn()`显示消息框，并使用`.delay()`和`.fadeOut()`设定一段时间后自动淡出。...
2. **jQuery UI和Bootstrap**：jQuery本身并不直接提供弹出消息提示框的功能，但可以通过引入jQuery UI或Bootstrap库来实现。jQuery UI的`dialog()`方法可以创建可自定义的对话框，而Bootstrap的`modal`组件则提供了...
在本文中，我们将深入探讨如何使用jQuery实现一个功能丰富的QQ登录框，该登录框支持点击弹出，并且具有下拉的二维码登录选项。这在现代Web应用中是一种常见的用户认证方式，尤其对于那些希望整合社交账号登录的网站...
通过上述步骤，我们可以实现一个基本的jQuery右下角消息提示框。当然，实际项目中可能还需要考虑响应式设计、多语言支持、更好的动画效果等因素，这需要根据具体需求进行调整和优化。总之，jQuery提供了一个强大的...
在本文中，我们将深入探讨如何利用jQuery来创建一个消息弹出框，并且提供完整的源代码供初学者学习。jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理和Ajax交互，同时也为开发者提供了丰富的插件和...
为了实现这样的效果，开发者经常利用JavaScript库，如jQuery，来创建各种动态效果，其中就包括模拟类似QQ的消息弹出提醒。这种插件允许在页面上以类似即时通讯软件的方式向用户展示通知，增加了网站的互动性。 **...
在网页开发中，为了给用户提供...总结来说，通过JQuery实现轻量型吐丝消息框主要涉及DOM操作、动画效果以及可能的样式定制。通过理解并应用上述代码和技巧，你可以根据项目需求创造出符合用户体验的动态消息提示功能。