可以滑动的div块 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>滑动的div</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var i = 0; var step = 2; var timed; var h = 0;//已经滑动的高度 function slide() { timed = setTimeout("slide()", 10); var boxHeight = document.getElementById("oBox").style.height.replace("px","");//外层div的高度 var slideBoxStyle = document.getElementById("slideBox").style; var top = slideBoxStyle.marginTop.replace("px",""); var slideBoxHeight = slideBoxStyle.height.replace("px","");//滑动div的高度 var totalHeight = Number(boxHeight) - Number(slideBoxHeight); h = Number(top) + step; if(i < 50 && h <= totalHeight) { slideBoxStyle.marginTop = h + "px"; i += step; } else { clearTimeout(timed); i = 0; } document.getElementById("show").value = h + ":" + totalHeight; } </script> </head> <body> <div id="oBox" style="width:100px;height:300px;background-color:red;overflow:hidden"> <div id="slideBox" style="width:100px;height:100px;background-color:gray;margin-top:0px"> </div> </div> <input type="button" value="Go..." onclick="slide()"> <input type="text" id="show"> </body> </html>
posted on 2010-07-14 16:56 java课程设计 阅读(449) 评论(0) 收藏 举报
浙公网安备 33010602011771号