计算浏览器文档的高度
if (document.compatMode == "BackCompat") {
var winheight = document.body.clientHeight;
} else {
var winheight = document.documentElement.clientHeight;
}
tip动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://res.wisedu.com/bower_components/jquery/dist/jquery.min.js"></script>
</head>
<style type="text/css">
.tooltip {
text-align: center;
width: 220px;
padding: 10px;
height: 20px;
border-radius: 3px;
position: fixed;
top: -100px;
left: 50%;
margin-left: -110px;
box-shadow: 1px 1px 10px 0 #ccc;
background: #fff;
transition: top 1s ease-in-out;
-moz-transition: top 1s ease-in-out;
-webkit-transition: top 1s ease-in-out;
-o-transition: top 1s ease-in-out;
}
.tooltip p {
margin: 0;
}
</style>
<body>
<h1 onclick="tip()">Hi</h1>
<div class="tooltip">
<p>我是一个提示框！</p>
</div>
</body>
<script type="text/javascript">
function tip() {
$('.tooltip').css("top", "50px");
setTimeout(function back() {
$('.tooltip').css("top", "-100px");
}, 2000);
}
</script>
</html>
