首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

皮蛋

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
js微信分享接口调用详解
Jul 23 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
antd design table更改某行数据的样式操作
Oct 31 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 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
calc(1) Hive(5) Windows Server(4) K8s(1) HttpClient(1) SandBox(1) swing(1) NTP(1) OpenFeign(1) Windows Server 2022(3)
You might like
php动态绑定变量的用法
2015/06/16 PHP
phalcon框架使用指南
2016/02/23 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
JavaScript使用cookie
2007/02/02 Javascript
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
nodejs中的fiber（纤程）库详解
2015/03/24 NodeJs
js滑动提示效果代码分享
2016/03/10 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
python中property和setter装饰器用法
2019/12/19 Python
亲子拓展活动方案
2014/02/20 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
创业女性典型材料
2014/05/02 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2014年库房工作总结
2014/11/26 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
运动会宣传稿100字
2015/07/23 职场文书
企业团队精神心得体会
2016/01/19 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS