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 相关文章推荐
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
vue2中使用less简易教程
Mar 27 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
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
一个SQL管理员的web接口
2006/10/09 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
详解jQuery事件
2017/01/13 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
python批量提取word内信息
2015/08/09 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
python逆向入门教程
2018/01/15 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
金智子午JAVA面试题
2015/09/04 面试题
竞聘上岗演讲稿
2014/05/16 职场文书
协议书范文
2015/01/27 职场文书
大学生英文求职信范文
2015/03/19 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS