首頁 > 開發者 > JavaScript
可以滑動的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 />
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
