点击向下滑动js

点击向下滑动, 如果要滚动的那个div的总高度,已经到边缘了 ,点击就不再滚动.....谁来帮忙修改下这个JS？  O(∩_∩)O谢谢了啊。 这个JS也是一位热心的CSDN帮忙写的。<div style="width:100px;height:300px;background-color:red;overflow:hidden">
    <div id="a" style="width:100px;height:100px;background-color:gray;margin-top:0px">
    </div>
</div>
<input type="button" value="button" onclick="abc()">
<script type="text/javascript">
    
    var i=0;
    var sd=2;
    var time;
    function abc()
    {        
        time=setTimeout("abc()",10);        if(i<50)
        {
            document.getElementById("a").style.marginTop=document.getElementById("a").style.marginTop.replace("px","")-0+sd+"px";
            i=i+sd;
        }
        else
        {
            clearTimeout(time);
            i=0;
        }    
    }
</script>

解决方案 »

  1.   

    <div style="width:100px;height:300px;background-color:red;overflow:hidden">
    <div id="a" style="width:100px;height:100px;background-color:gray;margin-top:0px">
    </div>
    </div>
    <input type="button" value="button" onclick="abc()">
    <script type="text/javascript">
    var i=0;
    var sd=2;
    var time;
    var h;function abc(){   
    time = setTimeout("abc()", 10);
    var obj = document.getElementById("a");
    h = parseInt(document.getElementById("a").style.marginTop.replace("px", "")) + sd; if(i < 50 && h + obj.offsetHeight <= obj.parentNode.offsetHeight){
    document.getElementById("a").style.marginTop = h + "px";
    i = i + sd;
    }else{
    clearTimeout(time);
    i = 0;
    }   
    }
    </script>
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>openDiv.html</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 speed = 50;
    var maxheight = 450;

    //点击checkBox引发此函数
    function divPopup(event, item){
    var ruleDiv = document.getElementById("smsDiv");
    if(item.checked){
    DivShow(ruleDiv);
    }else{
    DivHide(ruleDiv);
    }
    }

    //DIV展开与收起的两个函数
    function DivShow(item) {
    var temp = item.style.height;
    item.style.height = parseInt(temp.substring(0, temp.length - 2)) + speed + "px";
    temp = item.style.height;
    if(parseInt(temp.substring(0, temp.length - 2)) < maxheight){
    setTimeout(function () {
    DivShow(item);
    }, 100);
    }
    }

    function DivHide(item) {
    var temp = item.style.height;
    item.style.height = parseInt(temp.substring(0, temp.length - 2)) - speed + "px";
    temp = item.style.height;
    temp = parseInt(temp.substring(0, temp.length - 2));
    if(temp > 0){
    setTimeout(function () {
    DivHide(item);
    }, 100);
    }
    }
        </script>
      </head>
      
      <body>
       <input type="checkbox" onclick="divPopup(event, this)"/>
        <div id="smsDiv" style="border: 1px solid red; width: 200px; height: 200px; background-color: #CCCCFF;"></div>
      </body>
    </html>
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>testFor.html</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 sd = 2;
      var time;
      var h = 0;
      function abc() {  
      time = setTimeout("abc()", 10);
      var boxH = document.getElementById("oBox").style.height.replace("px","");//外层div的高度
      var aSty = document.getElementById("a").style;
      var top = aSty.marginTop.replace("px","");
      var aH = aSty.height.replace("px","");//滑动div的高度
      var totalH = (Number(boxH) - Number(aH));
         h = top - 0 + sd;
      if(i<50 && h <= totalH) {
      document.getElementById("a").style.marginTop = h + "px";
      i = i + sd;
      } else {
      clearTimeout(time);
      i = 0;
      }  
      document.getElementById("show").value = h + ":" +totalH;
      }
        </script>  </head>
      
      <body>
        <div id="oBox" style="width:100px;height:300px;background-color:red;overflow:hidden">
        <div id="a" style="width:100px;height:100px;background-color:gray;margin-top:0px">
        </div>
        </div>
    <input type="button" value="button" onclick="abc()">
    <input type="text" id="show">
      </body>
    </html>
    改好了