jQuery實作資訊提示框(有圓角框與動畫)效果_jquery
- WBOY原創
- 2016-05-16 15:46:301393瀏覽
本文實例講述了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="http://www.jb51.net/" class="home">Humanized Messages</a>
</p>
</body>
</html>
希望本文所述對大家的jquery程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn