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

2019-11-20 11:53:20

字体：大中小

来源：转载

供稿：网友

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

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

先来看看运行效果如下：

具体代码如下：

<!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="//www.VeVB.COm/" class="home">Humanized Messages</a> </p></body></html>

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

上一篇：jQuery实现高亮显示网页关键词的方法

下一篇：css如何让浮动元素水平居中