jQuery实现信息提示框(带有圆角框与动画)效果


Posted in Javascript onAugust 07, 2015

本文实例讲述了jQuery实现信息提示框效果。分享给大家供大家参考。具体如下:

一个jquery提示框特效,黑色风可,且提示框是圆角形状,点击页面中间的几个文字,提示框信息就会动态显示,CSS和JS部分代码比较多。

先来看看运行效果如下:

jQuery实现信息提示框(带有圆角框与动画)效果

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现的非常人性化的提示信息框效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var humanMsg = {
 setup: function(appendTo, logName, msgOpacity) {
 humanMsg.msgID = 'humanMsg';
 humanMsg.logID = 'humanMsgLog';
 if (appendTo == undefined)
  appendTo = 'body';
 if (logName == undefined)
  logName = 'Message Log';
 humanMsg.msgOpacity = .8;
 if (msgOpacity != undefined) 
 humanMsg.msgOpacity = parseFloat(msgOpacity);
 jQuery(appendTo).append('<div id="'+humanMsg.msgID+'" class="humanMsg"><div class="round"></div><p></p><div class="round"></div></div> <div id="'+humanMsg.logID+'"><p>'+logName+'</p><ul></ul></div>')
 jQuery('#'+humanMsg.logID+' p').click(
  function() { jQuery(this).siblings('ul').slideToggle() }
 )
 },
 displayMsg: function(msg) {
 if (msg == '')
 return;
 clearTimeout(humanMsg.t2);
 jQuery('#'+humanMsg.msgID+' p').html(msg)
 jQuery('#'+humanMsg.msgID+'').show().animate({ opacity: humanMsg.msgOpacity}, 200, function() {
  jQuery('#'+humanMsg.logID)
  .show().children('ul').prepend('<li>'+msg+'</li>') 
  .children('li:first').slideDown(200) 
  if ( jQuery('#'+humanMsg.logID+' ul').css('display') == 'none') {
  jQuery('#'+humanMsg.logID+' p').animate({ bottom: 40 }, 200, 'linear', function() {
  jQuery(this).animate({ bottom: 0 }, 300, 'easeOutBounce', function() { jQuery(this).css({ bottom: 0 }) })
  })
  }
 })
 humanMsg.t1 = setTimeout("humanMsg.bindEvents()", 700)
 humanMsg.t2 = setTimeout("humanMsg.removeMsg()", 5000)
 },
 bindEvents: function() {
 jQuery(window)
  .mousemove(humanMsg.removeMsg)
  .click(humanMsg.removeMsg)
  .keypress(humanMsg.removeMsg)
 },
 removeMsg: function() {
 // Unbind mouse & keyboard
 jQuery(window)
  .unbind('mousemove', humanMsg.removeMsg)
  .unbind('click', humanMsg.removeMsg)
  .unbind('keypress', humanMsg.removeMsg)
 if (jQuery('#'+humanMsg.msgID).css('opacity') == humanMsg.msgOpacity)
  jQuery('#'+humanMsg.msgID).animate({ opacity: 0 }, 500, function() { jQuery(this).hide() })
 }
};
jQuery(document).ready(function(){
 humanMsg.setup();
})
</script>
<style>
html, body {
 height: 100%; /* Damn you IE! */
}
.humanMsg {
 font: normal 20px/50px Helvetica, Arial, Sans-Serif;
 letter-spacing: -1px;
 position: fixed;
 top: 130px;
 left: 25%;
 width: 50%;
 color: white;
 background-color: black;
 text-align: center; 
 display: none;
 opacity: 0;
 z-index: 100000;
}
.humanMsg .round {
 border-left: solid 2px white;
 border-right: solid 2px white;
 font-size: 1px; height: 2px;
 }
.humanMsg p {
 padding: .3em;
 display: inline; 
 }
.humanMsg a {
 display: none;
 }
#humanMsgLog {
 font: normal 10px Helvetica, Arial, Sans-Serif;
 color: white;
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 max-height: 200px;
 display: none;
 z-index: 10000;
 }
#humanMsgLog p {
 position: relative;
 left: 50%;
 width: 200px;
 margin: 0;
 margin-left: -100px;
 padding: 0 10px;
 line-height: 20px;
 background: #333;
 text-align: center;
 white-space: pre;
 cursor: pointer;
 }
#humanMsgLog p:hover {
 background: #222;
 }
#humanMsgLog ul {
 margin: 0;
 padding: 0;
 position: relative;
 max-height: 180px;
 overflow: auto;
 display: none;
 }
#humanMsgLog ul li {
 color: #555;
 font-size: 12px;
 list-style-type: none;
 border-bottom: 1px solid #ddd;
 line-height: 40px;
 display: none;
 padding: 0 20px;
 position: relative;
 overflow: hidden;
 white-space: pre;
 }
#humanMsgLog ul li:hover {
 background: #f2f2f2;
 }
#humanMsgLog ul li:first-child {
 margin-top: 1px;
 }
#humanMsgLog ul li .error {
 color: orangered;
 }
#humanMsgLog ul li .indent {
 position: absolute;
 top: 0;
 left: 100px;
 margin-right: 200px;
 height: inherit;
}
</style>
<script>
 jQuery(document).ready(function() {
 jQuery('a.showmessage').click(function() {
  humanMsg.displayMsg('<strong>Success:</strong> <span class="indent">You clicked \''+jQuery(this).text()+'\'</span>');
  return false;
 })
 jQuery('a.showmessage:last').click(function() {
  humanMsg.displayMsg('"Your <strong>Earth</strong> will be reduced to a burned-out cinder."');
  return false;
 })
 })
 </script>
 <style>
 p.links {
  position: absolute;
  font: 2em Helvetica, Arial, Sans-Serif;
  top: 40%;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  text-align: center;  
 }
 p.links a {
  text-decoration: none;
  color: #888;
 }
 p.links a:hover {
  color: #222;
 }
 p.links a.home {
  font-size: 10px;
  line-height: 30px;
 }
</style>
</head>
<body>
 <p class="links">
 <a href="#" class="showmessage">Klaatu</a>
 <a href="#" class="showmessage">Barada</a>
 <a href="#" class="showmessage">Nikto</a><br />
 <a href="https://3water.com/" class="home">Humanized Messages</a>
 </p>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
js键盘事件的keyCode
Jul 29 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
css如何让浮动元素水平居中
Aug 07 #Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 #Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 #Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 #Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 #Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 #Javascript
jQuery使用animate创建动画用法实例
Aug 07 #Javascript
You might like
php HTML无刷新提交表单
2016/04/05 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python字符串的拼接方法总结
2019/11/18 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
Python 字符串池化的前提
2020/07/03 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
异步传递消息系统的作用
2016/05/01 面试题
财务管理专业应届毕业生求职信
2013/09/22 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
文明倡议书范文
2014/04/15 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
react 路由Link配置详解
2021/11/11 Javascript
html粘性页脚的具体使用
2022/01/18 HTML / CSS