zoukankan      html  css  js  c++  java
  • 模拟滚动条

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>模拟滚动条</title>
    <style type="text/css">
    body, div {
        margin:0;
        padding:0;
    }
    .scrollbar {
        width:300px;
        height:300px;
        border:2px solid #CCF;
        margin:100px auto;
        position:relative;
        overflow:hidden;
    }
    .scroll {
        position:absolute;
        top:0;
        left:0;
        background:#f2f2f2;
        color:#F00;
        padding:0 10px;
        line-height:24px;
        font-size:13px;
        margin-right:10px;
    }
    .barwrap {
        width:10px;
        height:100%;
        position:absolute;
        right:0;
        top:0;
        background:#C69;
    }
    .bar {
        position:absolute;
        top:0;
        left:0;
        width:10px;
        height:10px;
        background:#03F;
    }
    </style>
    </head>
    <body>
    <div class="scrollbar" id="scrollbar">
      <div class="scroll" id="scroll">
        <p>日前,国际知名反病毒评测机构AV-C发布最新一期手动扫描测试报告,国内360杀毒软件以99.5%的高查杀率和极少误报被AV-C评为最佳级别(Advanced+)。在不久前AV-C发布的动态防护评测中,360杀毒则是唯一得分超过99%的国产安全软件。</p>
        <p> 据了解,参与本次测试的国内外安全产品共23款,其中国内安全产品4款。由于金山毒霸使用未公开版本在评测中作弊,被AV-C评测机构取消了成绩,百度杀毒则排名垫底没有获得认证。 </p>
        <p> AV-C手动扫描主要通过详细测试安全软件的查杀比率、误报数量,考验安全软件的扫描查杀能力,360杀毒等多款国内杀毒软件均在此项测试中达到99%以上的查杀率。不过对普通用户来说,杀毒软件的防护能力更为重要。在AV-C对杀毒软件的防护能力评测中,仅有360杀毒对病毒拦截率超过99%,排名占据前列;腾讯等其他国产软件则排名倒数。 </p>
        <p> 随着微软对Windows XP停止服务支持,安全软件对XP的防护能力成为行业关注的焦点。在此前国内举办的首个XP挑战赛中,腾讯和金山相继在一两分钟内被黑客攻破,之后又陆续被多人次攻破,360XP盾甲则成功防御了所有黑客攻击。 </p>
        <p> 而在国际知名机构COSEINC发布的XP漏洞防护评测报告中,360同样以100%的防御成功率排名第一,德国的Avira和俄罗斯的卡巴斯基分别名列第二和第三;腾讯电脑管家和金山毒霸则双双垫底,拦截率仅为33%,表现远低于63%的平均水平。 </p>
          <p>日前,国际知名反病毒评测机构AV-C发布最新一期手动扫描测试报告,国内360杀毒软件以99.5%的高查杀率和极少误报被AV-C评为最佳级别(Advanced+)。在不久前AV-C发布的动态防护评测中,360杀毒则是唯一得分超过99%的国产安全软件。</p>
        <p> 据了解,参与本次测试的国内外安全产品共23款,其中国内安全产品4款。由于金山毒霸使用未公开版本在评测中作弊,被AV-C评测机构取消了成绩,百度杀毒则排名垫底没有获得认证。 </p>
        <p> AV-C手动扫描主要通过详细测试安全软件的查杀比率、误报数量,考验安全软件的扫描查杀能力,360杀毒等多款国内杀毒软件均在此项测试中达到99%以上的查杀率。不过对普通用户来说,杀毒软件的防护能力更为重要。在AV-C对杀毒软件的防护能力评测中,仅有360杀毒对病毒拦截率超过99%,排名占据前列;腾讯等其他国产软件则排名倒数。 </p>
        <p> 随着微软对Windows XP停止服务支持,安全软件对XP的防护能力成为行业关注的焦点。在此前国内举办的首个XP挑战赛中,腾讯和金山相继在一两分钟内被黑客攻破,之后又陆续被多人次攻破,360XP盾甲则成功防御了所有黑客攻击。 </p>
        <p> 而在国际知名机构COSEINC发布的XP漏洞防护评测报告中,360同样以100%的防御成功率排名第一,德国的Avira和俄罗斯的卡巴斯基分别名列第二和第三;腾讯电脑管家和金山毒霸则双双垫底,拦截率仅为33%,表现远低于63%的平均水平。 </p>
          <p>日前,国际知名反病毒评测机构AV-C发布最新一期手动扫描测试报告,国内360杀毒软件以99.5%的高查杀率和极少误报被AV-C评为最佳级别(Advanced+)。在不久前AV-C发布的动态防护评测中,360杀毒则是唯一得分超过99%的国产安全软件。</p>
        <p> 据了解,参与本次测试的国内外安全产品共23款,其中国内安全产品4款。由于金山毒霸使用未公开版本在评测中作弊,被AV-C评测机构取消了成绩,百度杀毒则排名垫底没有获得认证。 </p>
        <p> AV-C手动扫描主要通过详细测试安全软件的查杀比率、误报数量,考验安全软件的扫描查杀能力,360杀毒等多款国内杀毒软件均在此项测试中达到99%以上的查杀率。不过对普通用户来说,杀毒软件的防护能力更为重要。在AV-C对杀毒软件的防护能力评测中,仅有360杀毒对病毒拦截率超过99%,排名占据前列;腾讯等其他国产软件则排名倒数。 </p>
        <p> 随着微软对Windows XP停止服务支持,安全软件对XP的防护能力成为行业关注的焦点。在此前国内举办的首个XP挑战赛中,腾讯和金山相继在一两分钟内被黑客攻破,之后又陆续被多人次攻破,360XP盾甲则成功防御了所有黑客攻击。 </p>
        <p> 而在国际知名机构COSEINC发布的XP漏洞防护评测报告中,360同样以100%的防御成功率排名第一,德国的Avira和俄罗斯的卡巴斯基分别名列第二和第三;腾讯电脑管家和金山毒霸则双双垫底,拦截率仅为33%,表现远低于63%的平均水平。 </p>
      </div>
      <div class="barwrap" id="barwrap">
        <div class="bar" id="bar"></div>
      </div>
    </div>
    </body>
    </html>
    <script type="text/javascript">
        var scrollbar=document.getElementById("scrollbar");
        var scrolls=document.getElementById("scroll");
        var barwrap=document.getElementById("barwrap");
        var bar=document.getElementById("bar");
        
        
        
        var scrollbarHeight=scrollbar.offsetHeight;
        //var barHeight=bar.offsetHeight;
        var barwrapHeight=barwrap.offsetHeight;
        var scrollHeight=scrolls.offsetHeight;
        var scrollbarHeight=scrollbar.offsetHeight;
        
        var barHeight=scrollbarHeight/scrollHeight*barwrapHeight
        
        if(barHeight<10){
            barHeight=10;
        }
        
        bar.style.height=barHeight+"px";
        
    
        var bartop=bar.offsetTop;
        bar.onmousedown=function(e){
            var e=e||event;
            var barTop=bar.offsetTop;
            var disY=e.clientY-barTop;
            document.onmousemove=function(e){
                var e=e||event;
                barTop2=e.clientY-disY;
                if(barTop2<0){
                    barTop2=0;
                }
                if(barTop2>(barwrapHeight-barHeight)){
                    barTop2=barwrapHeight-barHeight
                }
                bar.style.top=barTop2+"px";
                depo(barTop2)
            }
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
                }
            return false;
        }
        
        barwrap.onclick=function(e){
            var e=e||event;
            var disY2=e.clientY-scrollbar.offsetTop-bar.offsetHeight/2;
            bar.style.top=disY2+"px";
            depo(disY2)
        }
        
        function depo(po){
            if(po<0 || po==0){
                    po=0;
                }
                if(po>(barwrapHeight-barHeight)){
                    po=barwrapHeight-barHeight;
                }
            var ji=(barwrapHeight-barHeight)/po;
            var scrollsTop=(scrollbarHeight-scrollHeight)/ji;    
            scrolls.style.top=scrollsTop+"px";
        }
        
        
        
    function wheel(obj){
        var obk=obj||document;
        var result;
        if(obk.attachEvent){
        obk.attachEvent("onmousewheel",function(e){
            var e=e||event;
            if(e.wheelDelta>0){
                bar.style.top=bar.offsetTop-10+"px";
                if(bar.offsetTop<0){
                    bar.style.top=0;
                }
                if(bar.offsetTop>barwrapHeight-barHeight){
                    bar.style.top=barwrapHeight-barHeight+"px";
                }
                depo(bar.offsetTop)    
                
            }else{
                bar.style.top=bar.offsetTop+10+"px";
                if(bar.offsetTop<0){
                    bar.style.top=0;
                }
                if(bar.offsetTop>barwrapHeight-barHeight){
                    bar.style.top=barwrapHeight-barHeight+"px";
                }
                depo(bar.offsetTop)    
                
            }
            })
        }else{
        obk.addEventListener("DOMMouseScroll",function(e){
            var e=e||event;
            if(e.detail>0){
                bar.style.top=bar.offsetTop+10+"px";
                if(bar.offsetTop>barwrapHeight-barHeight){
                    bar.style.top=barwrapHeight-barHeight+"px";
                }
                depo(bar.offsetTop)    
                
            }else{
                bar.style.top=bar.offsetTop-10+"px";
                if(bar.offsetTop<0){
                    bar.style.top=0;
                }
                depo(bar.offsetTop)    
                
                }
            },false)
        }
        
    }
    wheel(scrollbar)
    
    
    </script>
  • 相关阅读:
    源码阅读(18):Java中主要的Map结构——HashMap容器(中)
    源码阅读(17):红黑树在Java中的实现和应用
    java中创建文件并写入的方法
    源码阅读(16):Java中主要的Map结构——HashMap容器(上)
    源码阅读(15):Java中主要的Map结构——概述
    从源码分析:Java中的AQS
    源码阅读(14):Java中主要的Queue、Deque结构——PriorityQueue集合(下)
    源码阅读(13):Java中主要的Queue、Deque结构——PriorityQueue集合(中)
    java 归并排序与快速排序
    python中的容器、可迭代对象、迭代器、生成器
  • 原文地址:https://www.cnblogs.com/busicu/p/3701094.html
Copyright © 2011-2022 走看看