最近对右下角的消息提示框进行了封装，有需要的可以拿来看看效果如何。下面开始贴上代码，并且进行必要的说明。
首先是css样式，如下所示
._f_r {
z-index: 1050;
position: fixed;
font-size: 12px;
text-align: left;
clear: both;
border-radius: 5px;
width: 200px;
height: 130px;
top: 100%;
left: 100%;
border: 3px solid #AAD9E8;
background-color: white;
/* IE6改为绝对定位，并通过css表达式根据滚动位置更改top的值 */
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop) );
}
._f_r_title {
height: 22px;
border-bottom: 1px solid #AABBCC;
text-align: center;
line-height: 22px;
font-weight: bolder;
margin-bottom: 3px;
background-color: #E8F2FE;
}
._f_r_btn {
float: right;
cursor: pointer;
border: 1px;
}/*
* 右下角消息提示框，使用说明
* @param {Object} $
* @memberOf {TypeName}
* @return {TypeName}
*
* 引入MsgBox.js以及msgbox.css然后，写如下一行代码即可
* var box=$.MsgBox.show({
* title:'提示框标题',
* content:'提示框内容'
* })
* 返回一个MsgBox对象，该对象可以执行hide函数，即box.hide()便可关闭对应的MsgBox对象
*
* $.MsgBox.autoHide({
* title:'提示框标题',
* content:'提示框内容'
* })
* 可以生成一个自动关闭的MsgBox，该方法没有返回的对象，也就是说，你不能很友好的操作该对象。
*/
(function($){
var MsgBox=function(settings){
var settings=$.extend({},MsgBox.defaults,settings);
var resultBox=$('<div class="_f_r"><div class="_f_r_title"><strong style="float:left;"> '+settings.title+'</strong><b class="_f_r_btn">x </b></div><span style="padding: 10px;"></span></div>');
resultBox.appendTo($("body")).find("span").text(settings.content);
var boxTop=(1-(resultBox.height()+6)/$(window).height())*100+"%";
var boxLeft=(1-(resultBox.width()+8)/$(window).width())*100+"%";
resultBox.animate( {
top:boxTop,
left:boxLeft
}, "slow").find("._f_r_btn").click(function() {
resultBox.animate( {
top:"100%",
left:"100%"
}, "slow");
//消息窗口延时删除
setTimeout(function() {
resultBox.remove();
}, 4000);
});
var brother=this;
brother.resultBox=resultBox;
}
var autoHide=function(settings) {
var settings=$.extend({},MsgBox.defaults,settings);
var resultBox=$('<div class="_f_r"><div class="_f_r_title"><strong style="float:left;"> '+settings.title+'</strong><b class="_f_r_btn">x </b></div><span style="padding: 10px;"></span></div>');
resultBox.appendTo($("body")).find("span").text(settings.content);
var boxTop=(1-(resultBox.height()+6)/$(window).height())*100+"%";
var boxLeft=(1-(resultBox.width()+8)/$(window).width())*100+"%";
resultBox.animate( {
top : boxTop,
left : boxLeft
}, "slow").find("._f_r_btn").click(function() {
resultBox.animate( {
top:"100%",
left:"100%"
}, "slow");
});
//消息窗口延时消失
setTimeout(function() {
resultBox.animate( {
top:"100%",
left:"100%"
}, "slow");
}, 4000);
//消息窗口延时删除
setTimeout(function() {
resultBox.remove();
}, 8000);
}
MsgBox.defaults={
title:'消息提示',
content:''
}
$.MsgBox={
show:function(settings){
return new MsgBox(settings);
},
autoHide:function(settings) {
autoHide(settings);
}
}
MsgBox.prototype={
hide:function(){
var obj=this;
var resultBox=obj.resultBox;
resultBox.animate( {
top : "100%",
left : "100%"
}, "slow");
//消息窗口延时删除
setTimeout(function() {
resultBox.remove();
}, 4000);
}
}
})(jQuery);<!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>CSS下拉菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("nav");
for (i = 0; i < navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onmouseover = function() {
this.className += " over";
}
node.onmouseout = function() {
this.className = this.className.replace(" over", "");
}
}
}
}
}
window.onload = startList;
</script>
<style type="text/css">
body {
text-align: center;
font-size: 12px;
}
#popimg {
WIDTH: 770px;
margin: 0 auto;
text-align: center;
}
#popimg2 {
WIDTH: 770px;
margin: 0 auto;
text-align: center;
z-index: -1;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
position: relative;
float: left;
width: 110px;
}
li ul {
position: absolute;
display: none;
top: 20px;
left: 0;
}
li:hover ul,li.over ul {
display: block;
}
ul li a {
display: block;
font-size: 12px;
border: 1px solid #ccc;
padding: 3px;
margin-right: 1px;
text-decoration: none;
color: #777;
background: #eee;
}
ul li a:hover {
background-color: #f4f4f4;
}
#test {
clear: both;
background-color: #999999;
width: 769px;
height: 100px;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="../plugins/jquery/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="../pzControls/msgbox/msgbox.css"/>
<script type="text/javascript" src="../pzControls/msgbox/MsgBox.js"></script>
<script type="text/javascript">
var box;
function sac(){
//使用jQuery MsgBox命名空间下的show函数创建一个右下角消息提示框
box=$.MsgBox.show({
title:"右下角提示框",
content:"提示消息"
});
}
function sac1(){
// 对应的右下角提示框执行关闭hide方法
box.hide();
}
function sac2(){
//使用jQuery MsgBox命名空间下的autoHide函数创建一个自动隐藏的右下角消息提示框
$.MsgBox.autoHide({
title:"右下角提示框2",
content:"提示消息2"
});
}
</script>
</head>
<body>
<div id="popimg">
<ul id="nav">
<li>
<a href="">图形图像</a>
<ul>
<li>
<a href="/sort/list_11_203_1.shtml">Ajax/JavaScript</a>
</li>
<li>
<a href="/sort/list_11_83_1.shtml">ExtJS</a>
</li>
<li>
<a href="/sort/list_11_112_1.shtml">jQuery</a>
</li>
</ul>
</li>
<li>
<a href="">参考</a>
<ul>
<li>
<a href="/sort/list_8_165_1.shtml">多媒体技术</a>
</li>
<li>
<a href="/sort/list_8_162_1.shtml">控件相关</a>
</li>
<li>
<a href="/sort/list_8_160_1.shtml">图形处理</a>
</li>
</ul>
</li>
<li>
<a href="">Ajax</a>
<ul>
<li>
<a href="/sort/list_11_168_1.shtml">CSS特效</a>
</li>
<li>
<a href="/sort/list_11_96_1.shtml">HTML</a>
</li>
<li>
<a href="/sort/list_11_202_1.shtml">在线编辑器</a>
</li>
</ul>
</li>
<li>
<a href="">教程类</a>
<ul>
<li>
<a href="/sort/list_8_165_1.shtml">多媒体技术</a>
</li>
<li>
<a href="/sort/list_8_162_1.shtml">控件相关</a>
</li>
<li>
<a href="/sort/list_8_160_1.shtml">图形处理</a>
</li>
</ul>
</li>
<li>
<a href="">参考</a>
<ul>
<li>
<a href="/sort/list_11_203_1.shtml">Ajax/JavaScript</a>
</li>
<li>
<a href="/sort/list_11_83_1.shtml">ExtJS</a>
</li>
<li>
<a href="/sort/list_11_112_1.shtml">jQuery</a>
</li>
</ul>
</li>
<li>
<a href="">VB源代码</a>
<ul>
<li>
<a href="/sort/list_8_165_1.shtml">多媒体技术</a>
</li>
<li>
<a href="/sort/list_8_162_1.shtml">控件相关</a>
</li>
<li>
<a href="/sort/list_8_160_1.shtml">图形处理</a>
</li>
</ul>
</li>
<li>
<a href="">VC++</a>
<ul>
<li>
<a href="/sort/list_8_163_1.shtml">界面编程</a>
</li>
<li>
<a href="/sort/list_8_161_1.shtml">数据库应用</a>
</li>
<li>
<a href="/sort/list_8_166_1.shtml">报表打印</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="popimg2">
<div id="test"></div>
</div>
<input type="button" value="弹出消息框1" οnclick="sac();"/>
<input type="button" value="关闭消息框1" οnclick="sac1();"/>
<input type="button" value="弹出消息框2并且自动消失" οnclick="sac2();"/>
</body>
</html>文章浏览阅读6.8k次。鼠标拖动滑动条的时候，触发事件OnNMCustomdrawSlider(NMHDR *pNMHDR, LRESULT *pResult)但是在窗体被其他页面遮挡重新显示在屏幕最前面的时候也会触发这个事件，例如最小化重新最大化的时候。网友对三种消息类型的解释：NM_CUSTOMDRAW，是子控件通知其父控件它已经完成重画功能，对Slider来说也就是我们每次鼠标按住滑块移动一下就_onnmthemechangedtranslatexslider
文章浏览阅读7.9k次。日期控件和时间控件为独立控件，日期时间控件要同时导入日期控件和时间控件的js，然后在日期控件添加时间控件显示参数，没有导入时间控件js，日期控件函数设置的时间控件参将包错日期官网网址：http://jqueryui.com/日期控件js：jquery-ui.js对应函数及默认属性设置：function Datepicker()时间官网网址：http://plugins._jquery ui picker
文章浏览阅读1.1k次，点赞5次，收藏2次。项目地址：https://github.com/103style/QQ6.1GestureLock该项目是仿照当前版本的QQ手势锁，主要实现设置手势锁和检验手势锁的功能。废话不多说 先上效果图。主界面代码：public class MainActivity extends AppCompatActivity implements View.OnC_android 仿qq手势密码锁
文章浏览阅读323次。2019 年 10 月 17 日，索尼在上海举行了一场跟 WALKMAN 40 周年相关的新品发布会。会上，索尼推出了两款新播放器，包括「入门旗舰」级定位的 NW-ZX500 系列播放器，面向入门用户 NW-A100 系列播放器。回归完整 Android 的 NW-ZX 系列对于索尼音频来说，「两年一更」是稳定的规律。每隔两年，索尼都会在对应定位的产品线上发布新品，以维持播放设备的产品节奏。而当时..._zx505 otg
文章浏览阅读1.6k次。Spring AOPAspectJ：（Java社区里最完整最流行的AOP框架）spring自身也有一套AOP框架，但相比较于AspectJ，更推荐AspectJ在Spring2.0以上版本中，可以使用基于AspectJ注解或基于XML配置的AOP。基于AspectJ注解：用AspectJ注解声明切面要在Spring中声明AspectJ切面，只需要在IOC容器中将切面声明为Bean实例，当在Spri..._aop的前置 ,后置,环绕有什么区别
文章浏览阅读320次。日前，国家能源局、农业农村部、国家乡村振兴局联合印发了《加快农村能源转型发展助力乡村振兴的实施意见》（以下简称《意见》），提出要引导充电业务运营商、新能源汽车企业在大型村镇、易地搬迁集中安置区、旅游景区、公共停车场等区域建设充换电站，优先推进县域内公务用车、公交车、出租车使用电动车，推广新能源汽车在旅游景区和特色小镇的应用。探索建立车桩站联动、信息共享、智慧调度的智能车联网平台，推动新能源汽车成为农村微电网的重要组成部分。大力支持地方开展新能源汽车和家电下乡。 《意见》提出，..._农业与新能源汽车行业的融合
文章浏览阅读1.1w次，点赞12次，收藏36次。Motivation两周前实验室要求我配置一个叫Speedy.js的编译器，配置这个编译器需要先配置好LLVM。根据这个编译器作者的教程，乱七八糟配置了一通，踩过一些坑，碰过一些雷，浪费了很多时间。花了两周时间，终于全套配置完成，因此想写个教程，留点知识给以后的自己和需要的各位。Speedy.js不好说，但是LLVM这东西以后有大概率会用的上。环境这是我这次配置LLVM过程中最大的_ubuntu hexagon llvm 8.5.09
文章浏览阅读1.9k次，点赞7次，收藏15次。2022年6月13日-记录Anaconda+tensorflow_gpu-2.9.0+spyder5.3.1+py3.9安装过程，回忆一下踩过的坑_anaconda navigator安装spyderd慢
文章浏览阅读2.6k次。_数据预处理流程图
文章浏览阅读129次。艾美捷Abnova LiquidCell 是一种非侵入性负富集系统，用于消耗白细胞 (WBC) 以及计数和回收循环稀有细胞 (CRC)。_负富集
文章浏览阅读17次。为了有效地管理和利用大规模数据，企业需要一个强大而可靠的数据底座。本文将介绍GaussDB的特点和优势，并提供相应的源代码示例，以展示其在数据管理方面的强大功能。总结而言，GaussDB作为一种高性能、可扩展和高可靠性的分布式数据库管理系统，与产业界紧密合作，为企业构建了稳固的数据基础。通过示例代码，我们展示了GaussDB的基本用法，希望能够帮助读者更好地了解和应用这一强大的数据管理工具。它支持数据备份和恢复，以及故障转移和自动故障转移，确保数据库在出现故障时能够自动切换到备用节点，保持业务的连续性。
文章浏览阅读3.6k次。15.MAC登陆的AppleID、邮件登陆的AppleID、AltStrore输入的AppleID以及手机的AppleID必须一致，并且必须保持登陆状态。8.点击菜单栏的App图标->点击Installaltstore->选择IPhone->登陆AppleID。10.邮件(保持打开)->偏好设置->管理插件->允许勾选->重启邮件、AltStore。9.安装Mailplugin->打开邮件应用App->登陆AppleID。11.重新执行步骤2。..._ios逆向教程