<!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
() {
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%;
}
.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>