search

Home >Web Front-end >JS Tutorial >jQuery implements the effect of information prompt box (with rounded corners and animation)_jquery

jQuery implements the effect of information prompt box (with rounded corners and animation)_jquery

WBOY
WBOYOriginal
2016-05-16 15:46:301456browse

The example in this article describes jQuery’s implementation of the information prompt box effect. Share it with everyone for your reference. The details are as follows:

A jquery prompt box special effect, black style, and the prompt box has a rounded shape. Click on a few words in the middle of the page, and the prompt box information will be displayed dynamically. There are many CSS and JS codes.

Let’s take a look at the running effect first:

The specific code is as follows: 

<!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="http://www.jb51.net/" class="home">Humanized Messages</a>
 </p>
</body>
</html>

I hope this article will be helpful to everyone’s jquery programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript encapsulation Cookie application interface_javascript skillsNext article：JavaScript encapsulation Cookie application interface_javascript skills

Related articles

See more