jquery右下角滑出提醒框
jQuery右下角滑出提醒框是一种常见的网页交互效果，能够在用户完成一定操作时自动向用户发出提示，从而提高用户体验和网站交互效率。本文将详细介绍如何使用jQuery实现右下角滑出提醒框。
一、实现原理
jQuery右下角滑出提醒框的实现原理是利用jQuery的animate()和css()方法，通过改变CSS属性值和动态设置动画效果，使提醒框从底部滑入页面，并在一定时间后自动消失。
二、HTML结构
首先，在HTML中建立提醒框的结构：
<div class="notify">
<p>提醒</p>
<span class="close">×</span>
</div>
其中“notify”类是整个提醒框的包裹容器，p标签用于填写提醒内容，close类是提醒框右上角的关闭按钮，用于手动关闭提醒框。
三、CSS样式
为提醒框添加CSS样式：
.notify {
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
color: #333;
font-size: 14px;
max-width: 300px;
padding: 10px 20px;
position: fixed;
right: 20px;
text-align: center;
bottom: -100px; // 初始位置在页面下方
transition: all 0.3s ease-out;
z-index: 100;
}
.notify p {
margin: 0;
padding: 0 0 5px;
}
.notify .close {
color: #A0A0A0;
cursor: pointer;
display: inline-block;
font-size: 22px;
margin-top: -8px;
padding: 0;
position: absolute;
right: 10px;
top: 50%;
transform: translate(0, -50%);
}
整个提醒框的样式设置主要包括以下几个属性：
- 背景颜色、边框圆角、阴影、字体颜色、字体大小；
- 最大宽度、内边距、固定定位、初始位置在页面下方、过渡效果；
- 去除p标签默认的margin和padding，设置关闭按钮样式并进行定位和居中显示。
四、JavaScript代码
接下来，利用JavaScript代码实现右下角滑出提醒框的功能：
// JQuery对象封装
$.fn.extend({
notify: function (msg, time, callback) {
var notify = this.find('.notify');
if (notify.length === 0) {
// 创建提醒框
var notify = $('<div class="notify"><p></p><span class="close">×</span></div>');
notify.hide().appendTo(this);
}
// 设置提醒内容并显示
notify.find('p').html(msg);
notify.css('bottom', 0).fadeIn();
// 定时隐藏并执行回调函数
setTimeout(function () {
notify.fadeOut(function () {
notify.css('bottom', '-100px');
if (typeof(callback) === 'function') callback();
});
}, time || 3000);
// 关闭按钮的点击事件
notify.find('.close').click(function () {
notify.fadeOut(function () {
notify.css('bottom', '-100px');
if (typeof(callback) === 'function') callback();
});
});
}
});
这段代码主要实现以下几个功能：
- 封装为JQuery插件，并通过msg参数传入提醒内容，time参数传入提醒的持续时间，默认为3秒；
- 判断提醒框是否存在，如果不存在则创建，并设置提醒内容并显示；
- 利用CSS动画将提醒框从底部滑入页面，显示一定时间后再自动隐藏；
- 通过设置“-100px”来将提醒框移回页面底部，等待下一次使用；
- 点击关闭按钮后隐藏提醒框。
五、应用示例
最后，使用jQuery右下角滑出提醒框的完整实现示例：
<div id="notify-box"></div>
<script>
$('#notify-box').notify('这是一条重要的信息！');
$('#notify-box').notify('这是另一条消息，持续时间为5秒', 5000, function () {
alert('消息已经消失！');
});
</script>
使用时，只需在需要提醒的地方引用notify.js和notify.css文件，在页面中添加一个容器元素，并调用notify()方法即可。其中， 个参数为提醒内容，第二个参数为持续时间，第三个参数为消息消失后执行的回调函数（可选）。
注：完整代码请参考附件。