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实现二分查找法实现代码
Nov 12 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
JS函数式编程实现XDM一
Jun 16 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
ThinkPHP中Session用法详解
2014/11/29 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
smarty自定义函数用法示例
2016/05/20 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
JavaScript实现联动菜单特效
2020/01/07 Javascript
python中copy()与deepcopy()的区别小结
2018/08/03 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
介绍一下Java的安全机制
2012/06/28 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
幼教简历自我评价
2014/01/28 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
服务承诺口号
2014/05/22 职场文书
五好关工委申报材料
2014/05/31 职场文书
上课说话检讨书500字
2014/11/01 职场文书
医生辞职信范文
2015/03/02 职场文书
民事纠纷协议书
2016/03/23 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技