22.自定义滚动条（练）

自定义滚动条：效仿拖拽，使得内部的div移不出外部的div;通过移动div控制矩形的大小，透明度，控制文子向上滑动；（根据内部div距外部div左边当前距离与最大距离之比来调节矩形大小，透明度，文子top距离；）

<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    var oParent=document.getElementById('parent');
    
    var disX=0;
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        
        disX=oEvent.clientX-oDiv.offsetLeft;
                
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            
            if(l<0)
            {
                l=0;
            }
            else if(l>oParent.offsetWidth-oDiv.offsetWidth)
            {
                l=oParent.offsetWidth-oDiv.offsetWidth;
            }
            
            oDiv.style.left=l+'px';
            
            var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
            document.title=scale;
            
            oDiv2.style.filter='alpha(opacity:'+scale*100+')';
            oDiv2.style.opacity=scale;
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
        
        return false;    //chrome、ff、IE9
    };
};
</script>

<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    var oParent=document.getElementById('parent');
    
    var disX=0;
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        
        disX=oEvent.clientX-oDiv.offsetLeft;
                
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            
            if(l<0)
            {
                l=0;
            }
            else if(l>oParent.offsetWidth-oDiv.offsetWidth)
            {
                l=oParent.offsetWidth-oDiv.offsetWidth;
            }
            
            oDiv.style.left=l+'px';
            
            var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
            document.title=scale;
            
            oDiv2.style.width=400*scale+'px';
            oDiv2.style.height=400*scale+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
        
        return false;    //chrome、ff、IE9
    };
};
</script>

<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    var oDiv3=document.getElementById('div3');
    var oParent=document.getElementById('parent');
    
    var disX=0;
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        
        disX=oEvent.clientX-oDiv.offsetLeft;
                
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            
            if(l<0)
            {
                l=0;
            }
            else if(l>oParent.offsetWidth-oDiv.offsetWidth)
            {
                l=oParent.offsetWidth-oDiv.offsetWidth;
            }
            
            oDiv.style.left=l+'px';
            
            var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
            document.title=scale;
            
            oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
        
        return false;    //chrome、ff、IE9
    };
};
</script>