登 录
可以滑动的div块</p> <p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /> <html><br /> <head><br /> <title>滑动的div</title></p> <p> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><br /> <meta http-equiv="description" content="this is my page"><br /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><br /> <script type="text/javascript"><br /> var i = 0;<br /> var step = 2;<br /> var timed;<br /> var h = 0;//已经滑动的高度<br /> function slide() {<br /> timed = setTimeout("slide()", 10);<br /> var boxHeight = document.getElementById("oBox").style.height.replace("px","");//外层div的高度<br /> var slideBoxStyle = document.getElementById("slideBox").style;<br /> var top = slideBoxStyle.marginTop.replace("px","");<br /> var slideBoxHeight = slideBoxStyle.height.replace("px","");//滑动div的高度<br /> var totalHeight = Number(boxHeight) - Number(slideBoxHeight);<br /> h = Number(top) + step;<br /> if(i < 50 && h <= totalHeight) {<br /> slideBoxStyle.marginTop = h + "px";<br /> i += step;<br /> } else {<br /> clearTimeout(timed);<br /> i = 0;<br /> }<br /> document.getElementById("show").value = h + ":" + totalHeight;<br /> }<br /> </script></p> <p> </head></p> <p> <body><br /> <div id="oBox" style="width:100px;height:300px;background-color:red;overflow:hidden"><br /> <div id="slideBox" style="width:100px;height:100px;background-color:gray;margin-top:0px"><br /> </div><br /> </div><br /> <input type="button" value="Go..." onclick="slide()"><br /> <input type="text" id="show"><br /> </body><br /> </html><br />
抱歉!评论已关闭.