• 模拟滚动条控制内容


    html代码:

    <div id="div1">
        <div id="div2"></div>
    </div>
    
    <div id="div3">
        <div id="div4">
            长文本
        </div>
    </div>

    css代码:

     1 body,div{
     2     margin: 0;
     3     padding: 0;
     4 }
     5 #div1{
     6     width: 30px;
     7     height: 500px;
     8     background: black;
     9     position: absolute;
    10     left: 10px;
    11     top: 10px;
    12 }
    13 #div2{
    14     width: 30px;
    15     height: 30px;
    16     background: red;
    17     position: absolute;
    18     left: 0;
    19     top: 0;
    20 }
    21 #div3{
    22     width: 498px;
    23     height: 498px;
    24     border: 1px solid green;
    25     position: absolute;
    26     left: 50px;
    27     top: 10px;
    28     overflow:hidden;
    29 }
    30 #div4{
    31     position: absolute;
    32     left: 0;
    33     top: 0;
    34 }

    javascript代码:

    window.onload = function(){
        var oDiv1 = document.getElementById("div1");
        var oDiv2 = document.getElementById("div2");
        var oDiv3 = document.getElementById("div3");
        var oDiv4 = document.getElementById("div4");
        
        iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
        
        oDiv2.onmousedown = function(ev){
            var ev = ev || event;
            var disY = ev.clientY - this.offsetTop;
            
            document.onmousemove = function(ev){
                var ev = ev || event;
                var T = ev.clientY - disY;
                
                if( T < 0 ){
                    T = 0;
                }else if( T > iMaxTop ){
                    T = iMaxTop;
                }
                
                oDiv2.style.top = T + "px";
                
                var iScale = T / iMaxTop;
                document.title = iScale;
                
                oDiv4.style.top = (oDiv3.offsetHeight - oDiv4.offsetHeight) * iScale + "px";
            }
            
            document.onmouseup = function(){
                document.onmousemove = document.onmouseup = null;
            }
            
            return false;
        }
    };
  • 相关阅读:
    【概念】指针
    【c++】随机数
    组装一台计算机
    模拟打印机
    实现手机的某些功能
    作业
    static 静态内部类
    java中编译报错 ClassCastException 是什么原因,如何处理
    作业1 2
    作业2
  • 原文地址:https://www.cnblogs.com/haishen/p/7930052.html
Copyright © 2020-2023  润新知