网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料:

 

标题 js滚动条平滑移动示例代码
内容
    本文实例为大家分享了js滚动条平滑移动相关代码,供大家参考,具体内容如下
    html页
    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
      <title></title> 
      <script src="../Scripts/JavaScript9.js"></script> 
      <link href="../Content/StyleSheet9.css" rel="stylesheet" /> 
      <script src="../Scripts/cxc.js"></script> 
      <meta charset="utf-8" /> 
    </head> 
    <body> 
      <input type="button" id="bt" value="滑动滚动条" /> 
      <div id="back"> 
      </div> 
      <div id="container"> 
        <div id="main"> 
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div>  
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div>  
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div>  
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div>  
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div> 
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div> 
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div> 
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div>   
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div> 
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div> 
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div> 
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div>  
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div> 
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div> 
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div> 
          <div> 
            <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
          </div>  
        </div> 
      </div> 
    </body> 
    </html>
    js页
    var body, back, container, main,bt; //dom 
    window.onload = function () { 
      domload(); 
      dominit(); 
      events(); 
    }; 
    var domload = function () { 
      body = document.body; 
      back = $("back"); 
      container = $("container"); 
      main = $("main"); 
      bt = $("bt"); 
    }; 
    var dominit = function () { 
      setH(back, screenH); 
      setH(container, screenH); 
      setH(main, screenW); 
    }; 
    var events = function () { 
      AddEvent(bt, EventsType[0], function () { 
        var speed = 10; 
        var min = 0,max = 449; 
        var scrolldown = function () { 
          min += speed; 
          if (min < max) { 
            container.scrollTop = min; 
            setTimeout(scrolldown, 4); 
          } 
        }; 
        setTimeout(scrolldown, 100); 
      }); 
    };
    css页
    * { 
      margin:0px; 
      padding:0px; 
    } 
    #back { 
      position: absolute; 
      width: 100%; 
      top: 0px; 
      left: 0px; 
      z-index: 1; 
      background-image: url('../Images/psbg/bg7.png'); 
    } 
    #container{ 
      position:absolute; 
      width:100%; 
      top:0px; 
      left:0px; 
      z-index:100; 
      overflow:auto; 
    } 
    #main{ 
      position:absolute; 
      width:100%; 
      top:0px; 
      left:0px; 
    } 
    .d{ 
      margin-top:50px; 
    } 
    #bt{ 
      position:absolute; 
      top:0; 
      right:50px; 
      z-index:200; 
    } 
    以上就是本文的全部内容,希望对大家的学习有所帮助。
随便看

 

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/21 17:05:15