码迷,mamicode.com
首页 > 其他好文 > 详细

模拟滚动条

时间:2014-09-22 17:41:32      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   使用   java   ar   

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>模拟滚动条</title>
</head>
<style>
body {
    background:#F60
}
#wrap {
    width:600px;
    height:300px;
    padding:0 10px;
    margin:100px auto;
    line-height:20px;
    font-size:13px;
    overflow:hidden;
    position:relative;
}
.scrollWrap {
    height:100%;
    width:3px;
    right:5px;
    top:0;
    background:#fff;
    opacity:0.4;
    z-index:100;
    position:absolute;
    margin-left:10px;
    filter:alpha(opacity=80);
}
.scrollbar {
    width:10px;
    min-height:20px;
    background:#fff;
    opacity:0.8;
    z-index:101;
    position:absolute;
    top:0;
    left:-3px;
    filter:alpha(opacity=80);
}
p {
    margin:0;
}
.conWrap {
    height:100%;
    margin-right:5px;
    background:#9F9;
    overflow:hidden;
    padding:0 5px;
}
</style>
<body>
<div id="wrap">
  <div class="conWrap"> 0000
    <p> 你可以会问,没有映射配置,请求这么可能会走到aspnet_ISPAI.dll上呢?对,这就是我们本章节要讲的一个东西:ASP.NET 4 Extensionless URL feature,因为在ASP.NET4之后,默认所有的请求都转向到aspnet_ISPAI.dll,那么在IIS6上它是如何实现的呢?首先ASP.NET4.0安装的时候会自动安装一个aspnet_filter.dll ,这是一个ISAPI筛选器,该筛选器在请求处理之前,会将所有的URL地址附加上/eurl.axd/GUID字符串,而默认情况下*.axd扩展名是映射到aspnet_isapi.dll上的,所以当我们附加/eurl.axd/GUID字符串以后,所有的请求都可以被aspnet_isapi.dll来处理了,当进入ASP.NET的时候的时候又把该/eurl.axd/GUID 字符串删除了(这个周期非常早),以便还原成原来的URL地址。.NET框架根目录下的web.config默认设置请求是DefaultHttpHandler来处理的,因为它的path=”*”,并且放在httpHandlers的第一个位置上(除非你修改了设置),此后DefaultHttpHandler将这个请求转发(不是URL跳转哦)至IIS上,这时候我们的筛选器不会再附加/eurl.axd/GUID字符串了,接下来就是正常的处理请求了,如果你想利用此特性做其它特殊的事情,那你需要在MapRequestHandler事件执行之前,修改DefaultHttpHandler为其它的HttpHandler。有一点需要注意的是,IIS7集成模式下,处理请求的默认Handler是不是DefaultHttpHandler而是TransferRequestHandler,两个Hanlder是差不多的,具体的细节不同不在我们讨论的范畴,我们就不多说了,这些handler默认是随.NET4.0安装的时候一起安装,但是IIS7默认是不启用这个功能的,只有在安装了IIS7的QFE才能使用,QFE包含在service pack中,QFE独立下载地址你可以会问,没有映射配置,请求这么可能会走到aspnet_ISPAI.dll上呢?对,这就是我们本章节要讲的一个东西:ASP.NET 4 Extensionless URL feature,因为在ASP.NET4之后,默认所有的请求都转向到aspnet_ISPAI.dll,那么在IIS6上它是如何实现的呢?首先ASP.NET4.0安装的时候会自动安装一个aspnet_filter.dll ,这是一个ISAPI筛选器,该筛选器在请求处理之前,会将所有的URL地址附加上/eurl.axd/GUID字符串,而默认情况下*.axd扩展名是映射到aspnet_isapi.dll上的,所以当我们附加/eurl.axd/GUID字符串以后,所有的请求都可以被aspnet_isapi.dll来处理了,当进入ASP.NET的时候的时候又把该/eurl.axd/GUID 字符串删除了(这个周期非常早),以便还原成原来的URL地址。.NET框架根目录下的web.config默认设置请求是DefaultHttpHandler来处理的,因为它的path=”*”,并且放在httpHandlers的第一个位置上(除非你修改了设置),此后DefaultHttpHandler将这个请求转发(不是URL跳转哦)至IIS上,这时候我们的筛选器不会再附加/eurl.axd/GUID字符串了,接下来就是正常的处理请求了,如果你想利用此特性做其它特殊的事情,那你需要在MapRequestHandler事件执行之前,修改DefaultHttpHandler为其它的HttpHandler。有一点需要注意的是,IIS7集成模式下,处理请求的默认Handler是不是DefaultHttpHandler而是TransferRequestHandler,两个Hanlder是差不多的,具体的细节不同不在我们讨论的范畴,我们就不多说了,这些handler默认是随.NET4.0安装的时候一起安装,但是IIS7默认是不启用这个功能的,只有在安装了IIS7的QFE才能使用,QFE包含在service pack中,QFE独立下载地址0000独立下载地址0000独立下载地址0000独立下载地址0000..................
      你可以会问,没有映射配置,请求这么可能会走到aspnet_ISPAI.dll上呢?对,这就是我们本章节要讲的一个东西:ASP.NET 4 Extensionless URL feature,因为在ASP.NET4之后,默认所有的请求都转向到aspnet_ISPAI.dll,那么在IIS6上它是如何实现的呢?首先ASP.NET4.0安装的时候会自动安装一个aspnet_filter.dll ,这是一个ISAPI筛选器,该筛选器在请求处理之前,会将所有的URL地址附加上/eurl.axd/GUID字符串,而默认情况下*.axd扩展名是映射到aspnet_isapi.dll上的,所以当我们附加/eurl.axd/GUID字符串以后,所有的请求都可以被aspnet_isapi.dll来处理了,当进入ASP.NET的时候的时候又把该/eurl.axd/GUID 字符串删除了(这个周期非常早),以便还原成原来的URL地址。.NET框架根目录下的web.config默认设置请求是DefaultHttpHandler来处理的,因为它的path=”*”,并且放在httpHandlers的第一个位置上(除非你修改了设置),此后DefaultHttpHandler将这个请求转发(不是URL跳转哦)至IIS上,这时候我们的筛选器不会再附加/eurl.axd/GUID字符串了,接下来就是正常的处理请求了,如果你想利用此特性做其它特殊的事情,那你需要在MapRequestHandler事件执行之前,修改DefaultHttpHandler为其它的HttpHandler。有一点需要注意的是,IIS7集成模式下,处理请求的默认Handler是不是DefaultHttpHandler而是TransferRequestHandler,两个Hanlder是差不多的,具体的细节不同不在我们讨论的范畴,我们就不多说了,这些handler默认是随.NET4.0安装的时候一起安装,但是IIS7默认是不启用这个功能的,只有在安装了IIS7的QFE才能使用,QFE包含在service pack中,QFE独立下载地址你可以会问,没有映射配置,请求这么可能会走到aspnet_ISPAI.dll上呢?对,这就是我们本章节要讲的一个东西:ASP.NET 4 Extensionless URL feature,因为在ASP.NET4之后,默认所有的请求都转向到aspnet_ISPAI.dll,那么在IIS6上它是如何实现的呢?首先ASP.NET4.0安装的时候会自动安装一个aspnet_filter.dll ,这是一个ISAPI筛选器,该筛选器在请求处理之前,会将所有的URL地址附加上/eurl.axd/GUID字符串,而默认情况下*.axd扩展名是映射到aspnet_isapi.dll上的,所以当我们附加/eurl.axd/GUID字符串以后,所有的请求都可以被aspnet_isapi.dll来处理了,当进入ASP.NET的时候的时候又把该/eurl.axd/GUID 字符串删除了(这个周期非常早),以便还原成原来的URL地址。.NET框架根目录下的web.config默认设置请求是DefaultHttpHandler来处理的,因为它的path=”*”,并且放在httpHandlers的第一个位置上(除非你修改了设置),此后DefaultHttpHandler将这个请求转发(不是URL跳转哦)至IIS上,这时候我们的筛选器不会再附加/eurl.axd/GUID字符串了,接下来就是正常的处理请求了,如果你想利用此特性做其它特殊的事情,那你需要在MapRequestHandler事件执行之前,修改DefaultHttpHandler为其它的HttpHandler。有一点需要注意的是,IIS7集成模式下,处理请求的默认Handler是不是DefaultHttpHandler而是TransferRequestHandler,两个Hanlder是差不多的,具体的细节不同不在我们讨论的范畴,我们就不多说了,这些handler默认是随.NET4.0安装的时候一起安装,但是IIS7默认是不启用这个功能的,只有在安装了IIS7的QFE才能使用,QFE包含在service pack中,QFE独立下载地址0000独立下载地址0000独立下载地址0000独立下载地址0000.................. </p>
    <p> 你可以会问,没有映射配置,请求这么可能会走到aspnet_ISPAI.dll上呢?对,这就是我们本章节要讲的一个东西:ASP.NET 4 Extensionless URL feature,因为在ASP.NET4之后,默认所有的请求都转向到aspnet_ISPAI.dll,那么在IIS6上它是如何实现的呢?首先ASP.NET4.0安装的时候会自动安装一个aspnet_filter.dll ,这是一个ISAPI筛选器,该筛选器在请求处理之前,会将所有的URL地址附加上/eurl.axd/GUID字符串,而默认情况下*.axd扩展名是映射到aspnet_isapi.dll上的,所以当我们附加/eurl.axd/GUID字符串以后,所有的请求都可以被aspnet_isapi.dll来处理了,当进入ASP.NET的时候的时候又把该/eurl.axd/GUID 字符串删除了(这个周期非常早),以便还原成原来的URL地址。.NET框架根目录下的web.config默认设置请求是DefaultHttpHandler来处理的,因为它的path=”*”,并且放在httpHandlers的第一个位置上(除非你修改了设置),此后DefaultHttpHandler将这个请求转发(不是URL跳转哦)至IIS上,这时候我们的筛选器不会再附加/eurl.axd/GUID字符串了,接下来就是正常的处理请求了,如果你想利用此特性做其它特殊的事情,那你需要在MapRequestHandler事件执行之前,修改DefaultHttpHandler为其它的HttpHandler。有一点需要注意的是,IIS7集成模式下,处理请求的默认Handler是不是DefaultHttpHandler而是TransferRequestHandler,两个Hanlder是差不多的,具体的细节不同不在我们讨论的范畴,我们就不多说了,这些handler默认是随.NET4.0安装的时候一起安装,但是IIS7默认是不启用这个功能的,只有在安装了IIS7的QFE才能使用,QFE包含在service pack中,QFE独立下载地址你可以会问,没有映射配置,请求这么可能会走到aspnet_ISPAI.dll上呢?对,这就是我们本章节要讲的一个东西:ASP.NET 4 Extensionless URL feature,因为在ASP.NET4之后,默认所有的请求都转向到aspnet_ISPAI.dll,那么在IIS6上它是如何实现的呢?首先ASP.NET4.0安装的时候会自动安装一个aspnet_filter.dll ,这是一个ISAPI筛选器,该筛选器在请求处理之前,会将所有的URL地址附加上/eurl.axd/GUID字符串,而默认情况下*.axd扩展名是映射到aspnet_isapi.dll上的,所以当我们附加/eurl.axd/GUID字符串以后,所有的请求都可以被aspnet_isapi.dll来处理了,当进入ASP.NET的时候的时候又把该/eurl.axd/GUID 字符串删除了(这个周期非常早),以便还原成原来的URL地址。.NET框架根目录下的web.config默认设置请求是DefaultHttpHandler来处理的,因为它的path=”*”,并且放在httpHandlers的第一个位置上(除非你修改了设置),此后DefaultHttpHandler将这个请求转发(不是URL跳转哦)至IIS上,这时候我们的筛选器不会再附加/eurl.axd/GUID字符串了,接下来就是正常的处理请求了,如果你想利用此特性做其它特殊的事情,那你需要在MapRequestHandler事件执行之前,修改DefaultHttpHandler为其它的HttpHandler。有一点需要注意的是,IIS7集成模式下,处理请求的默认Handler是不是DefaultHttpHandler而是TransferRequestHandler,两个Hanlder是差不多的,具体的细节不同不在我们讨论的范畴,我们就不多说了,这些handler默认是随.NET4.0安装的时候一起安装,但是IIS7默认是不启用这个功能的,只有在安装了IIS7的QFE才能使用,QFE包含在service pack中,QFE独立下载地址0000独立下载地址0000独立下载地址0000独立下载地址0000..................
      你可以会问,没有映射配置,请求这么可能会走到aspnet_ISPAI.dll上呢?对,这就是我们本章节要讲的一个东西:ASP.NET 4 Extensionless URL feature,因为在ASP.NET4之后,默认所有的请求都转向到aspnet_ISPAI.dll,那么在IIS6上它是如何实现的呢?首先ASP.NET4.0安装的时候会自动安装一个aspnet_filter.dll ,这是一个ISAPI筛选器,该筛选器在请求处理之前,会将所有的URL地址附加上/eurl.axd/GUID字符串,而默认情况下*.axd扩展名是映射到aspnet_isapi.dll上的,所以当我们附加/eurl.axd/GUID字符串以后,所有的请求都可以被aspnet_isapi.dll来处理了,当进入ASP.NET的时候的时候又把该/eurl.axd/GUID 字符串删除了(这个周期非常早),以便还原成原来的URL地址。.NET框架根目录下的web.config默认设置请求是DefaultHttpHandler来处理的,因为它的path=”*”,并且放在httpHandlers的第一个位置上(除非你修改了设置),此后DefaultHttpHandler将这个请求转发(不是URL跳转哦)至IIS上,这时候我们的筛选器不会再附加/eurl.axd/GUID字符串了,接下来就是正常的处理请求了,如果你想利用此特性做其它特殊的事情,那你需要在MapRequestHandler事件执行之前,修改DefaultHttpHandler为其它的HttpHandler。有一点需要注意的是,IIS7集成模式下,处理请求的默认Handler是不是DefaultHttpHandler而是TransferRequestHandler,两个Hanlder是差不多的,具体的细节不同不在我们讨论的范畴,我们就不多说了,这些handler默认是随.NET4.0安装的时候一起安装,但是IIS7默认是不启用这个功能的,只有在安装了IIS7的QFE才能使用,QFE包含在service pack中,QFE独立下载地址你可以会问,没有映射配置,请求这么可能会走到aspnet_ISPAI.dll上呢?对,这就是我们本章节要讲的一个东西:ASP.NET 4 Extensionless URL feature,因为在ASP.NET4之后,默认所有的请求都转向到aspnet_ISPAI.dll,那么在IIS6上它是如何实现的呢?首先ASP.NET4.0安装的时候会自动安装一个aspnet_filter.dll ,这是一个ISAPI筛选器,该筛选器在请求处理之前,会将所有的URL地址附加上/eurl.axd/GUID字符串,而默认情况下*.axd扩展名是映射到aspnet_isapi.dll上的,所以当我们附加/eurl.axd/GUID字符串以后,所有的请求都可以被aspnet_isapi.dll来处理了,当进入ASP.NET的时候的时候又把该/eurl.axd/GUID 字符串删除了(这个周期非常早),以便还原成原来的URL地址。.NET框架根目录下的web.config默认设置请求是DefaultHttpHandler来处理的,因为它的path=”*”,并且放在httpHandlers的第一个位置上(除非你修改了设置),此后DefaultHttpHandler将这个请求转发(不是URL跳转哦)至IIS上,这时候我们的筛选器不会再附加/eurl.axd/GUID字符串了,接下来就是正常的处理请求了,如果你想利用此特性做其它特殊的事情,那你需要在MapRequestHandler事件执行之前,修改DefaultHttpHandler为其它的HttpHandler。有一点需要注意的是,IIS7集成模式下,处理请求的默认Handler是不是DefaultHttpHandler而是TransferRequestHandler,两个Hanlder是差不多的,具体的细节不同不在我们讨论的范畴,我们就不多说了,这些handler默认是随.NET4.0安装的时候一起安装,但是IIS7默认是不启用这个功能的,只有在安装了IIS7的QFE才能使用,QFE包含在service pack中,QFE独立下载地址0000独立下载地址0000独立下载地址0000独立下载地址0000.................. </p>
  </div>
</div>
</body>
</html>
<script type="text/javascript">
function scrollBar(o){
    var _this=this;
    this.setTop=0;
    this.o=document.getElementById(o);
    this.child=this.o.children[0];
    this.h=this.child.offsetHeight;
    this.maxH=this.child.scrollHeight-this.h;
    this.oBarHeight=parseInt(this.h*this.h/this.child.scrollHeight);
    if(this.child.scrollHeight>this.h){
    this.scrollWrap=this.creatDiv("scrollWrap",{height:this.h+"px"},this.o);    
    this.oBar=this.creatDiv("scrollbar",{height:this.oBarHeight+"px"},this.scrollWrap);    
    this.oBar.onmousedown=function(e){
        var e=e||event;
        _this.Down(e);
        document.onmousemove=function(e){
            var e=e||event;
            _this.Move(e);
        }
        document.onmouseup=function(e){
            _this.Up(e);
        }
        return false;
    }
    this.wheel(this.o,function(t){
            
            if(t){                
                var tTop=_this.oBar.offsetTop;
                if(tTop-10<=0){
                    tTop=10;    
                }
                _this.sport(tTop-10);
            }else{
                
                var tTop=_this.oBar.offsetTop;
                if(tTop+10>=_this.h-_this.oBar.offsetHeight){
                    tTop=_this.h-_this.oBar.offsetHeight-10;    
                }
                _this.sport(tTop+10);
            }
    })
    }
}

scrollBar.prototype={
    
    creatDiv:function(oClass,json,oParent){
        this.oDiv=document.createElement("div");
        this.oDiv.className=oClass;
        for(key in json){
            this.oDiv.style[key]=json[key];
        }
        oParent.appendChild(this.oDiv);
        return this.oDiv;
    },
    
    Down:function(e){
        if(this.oBar.setCapture){
            this.oBar.setCapture();
        }
        this.disY=e.clientY-this.oBar.offsetTop;
    },
    
    Move:function(e){
        this.sport(this.checkTop(e.clientY,this.disY));
    },
    Up:function(){
        if(this.oBar.releaseCapture){
            this.oBar.releaseCapture();
         }
        document.onmousemove=null;
        document.onmouseUp=null;
    },
    
    checkTop:function(x,y){
        this.setTop=x-y;
        if(this.setTop<=0){
            this.setTop=0;
        }    
        if(this.setTop>=this.h-this.oBar.offsetHeight){
            this.setTop=this.h-this.oBar.offsetHeight;
        }
        return this.setTop;
    },
    
    sport:function(num){
        this.child.scrollTop=(num/this.h)*this.child.scrollHeight;
        this.oBar.style.top=num+"px";
    },
    
    wheel:function(o,fn){
        o.onmousewheel=fnP;
        o.addEventListener("DOMMouseScroll",fnP,false);
        function fnP(e){
            var t=false;
            var e=e||event;    
            if(e.wheelDelta){
                if(e.wheelDelta>0){
                    t=true;
                }else{
                    t=false;
                }
            }else{
                if(e.detail>0){
                    t=false;    
                }else{    
                    t=true;
                }    
            }
                fn&&fn(t)
            }    
        }
}
new scrollBar("wrap");
</script>

 

模拟滚动条

标签:style   blog   http   color   io   os   使用   java   ar   

原文地址:http://www.cnblogs.com/busicu/p/3986093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!