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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
VueJS全面解析
Nov 10 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
Promise扫盲贴
Jun 24 Javascript
对vuex中store和$store的区别说明
Jul 24 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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
smarty模板引擎基础知识入门
2015/03/30 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Python GUI编程完整示例
2019/04/04 Python
详解python编译器和解释器的区别
2019/06/24 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
Python高并发和多线程有什么关系
2020/11/14 Python
Python实现简单猜数字游戏
2021/02/03 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
汽车驾驶求职信
2013/10/25 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
公司联欢会主持词
2015/07/04 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
angular异步验证器防抖实例详解
2022/03/31 Javascript