感覺在公司呆久了，業務邏輯寫的多，js的操作都快全忘了，今天幫別人寫了一個純的javaScript效果，類似於騰訊新聞的彈出效果。
html代碼：
<body style="width:800px; height:800px">
This is my JSP page. <br>
<!-- <div id="jsTest01" οnmοuseοver="MouseIn()" οnmοuseοut="MouseOut()" style="height:200px;width:100px;padding:30px;">nouse in</div>-->
<div id="jsTest02" style="width:200px;height:0px ;border-color:#cc0000;position:absolute;right:0px;bottom:0px;background-color: red">
<table height="200px" width="200px">
<tr height="20%">
<td>新聞頭條</td>
<td><a οnclick="closeM()">X</a></td>
</tr>
<tr height="80%">
<td colspan="2">新聞內容</td>
</tr>
</table>
</div>
</body>$(document).ready(function(){
move=window.setInterval(moveUp,"15"); // 每次隔一段時間調用高度自增函數，定義全局變量move<pre name="code" class="javascript">function moveUp(){
var d=document.getElementById("jsTest02"); // 得到div
var h=0; // 當前的div的高度
if((h=parseInt(d.style.height))<200){ // 如果當前的高度小於100px
d.style.height=(h+4)+'px'; // 每次讓高度增長兩個單位
}
else
window.clearInterval(move);
}
function moveDown(){
var d=document.getElementById("jsTest02"); // 得到div
var h=0; // 當前的div的高度
if((h=parseInt(d.style.height))>=0){ // 如果當前的高度大於0px
d.style.height=(h-4)+'px'; // 每次讓高度減小
}
else
window.clearInterval(down);
}
function closeM(){
down=window.setInterval(moveDown,"15"); // 使用全局變量down
}
