zoukankan      html  css  js  c++  java
  • JS+CSS实现网页滚动条美化

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JS+CSS实现网页滚动条美化</title>
    
    
    <script type="text/javascript">
     <!--
    function InitScrollBar(txtBox,txtContent,txtTrack,txtHandle,vHeight){
        //对象初始化
        var ObjScroll = new Object();
        ObjScroll.MaxScroll = vHeight;
        ObjScroll.ScrollBox = document.getElementById(txtBox);
     ObjScroll.ScrollContent = document.getElementById(txtContent);
     ObjScroll.ScrollTrack = document.getElementById(txtTrack);
     ObjScroll.ScrollHandle = document.getElementById(txtHandle);
     //对象不存在
        if(!(ObjScroll.ScrollBox && ObjScroll.ScrollContent && ObjScroll.ScrollTrack  && ObjScroll.ScrollHandle)){
            ObjScroll.ScrollTrack.style.display = "none";
            return;
        }
        //初始化元件高度、位置
     ObjScroll.ScrollAmount = ObjScroll.ScrollContent.offsetHeight/ObjScroll.MaxScroll;
     if(ObjScroll.ScrollAmount>1){
      ObjScroll.ScrollHandle.onmousedown = function(e){
          if (!e)
                e = window.event;
          beginDrag(e);
      }
      if(document.all){
          ObjScroll.ScrollContent.onmousewheel = function(){wheelScroll(event);}
      }
      else{
          ObjScroll.ScrollContent.addEventListener("DOMMouseScroll", wheelScroll, false); 
      }
      ObjScroll.ScrollTrack.style.height = ObjScroll.MaxScroll+2 + "px";
      ObjScroll.ScrollBox.style.height = ObjScroll.MaxScroll + "px"; 
      ObjScroll.ScrollHandle.style.marginTop = "0px";
      ObjScroll.ScrollHandle.style.height = Math.floor(ObjScroll.MaxScroll/ObjScroll.ScrollAmount) + "px";
      ObjScroll.MaxLength =  ObjScroll.MaxScroll - Math.floor(ObjScroll.MaxScroll/ObjScroll.ScrollAmount);
        
     }
     else{
      ObjScroll.ScrollTrack.style.display = "none";
     }
     //鼠标滚轮事件
     function wheelScroll(event){ 
         var wAmount = event.wheelDelta;
         if(!wAmount) wAmount = -event.detail*40;     
         ObjScroll.ScrollBox.scrollTop -= wAmount/12;
         if(ObjScroll.ScrollBox.scrollTop == 0) {
             ObjScroll.ScrollHandle.style.marginTop = "0px";
         }
         else if(ObjScroll.ScrollBox.scrollTop == ObjScroll.ScrollContent.offsetHeight - ObjScroll.MaxScroll){
             ObjScroll.ScrollHandle.style.marginTop = ObjScroll.MaxLength +"px";
         }
         else{
             ObjScroll.ScrollHandle.style.marginTop = parseInt(ObjScroll.ScrollHandle.style.marginTop) - Math.floor(wAmount/(12*ObjScroll.ScrollAmount)) + "px";
         }
         if(parseInt(ObjScroll.ScrollHandle.style.marginTop) > ObjScroll.MaxLength) ObjScroll.ScrollHandle.style.marginTop = ObjScroll.MaxLength +"px";
     }
     //拖动滚动条事件
     function beginDrag(event) {
            var deltaY = event.clientY - parseInt(ObjScroll.ScrollHandle.style.marginTop);        
            document.onmousemove = moveHandler;
            document.onmouseup = upHandler;
         document.onmouseout = outHandler;  
         if(document.all) ObjScroll.ScrollHandle.setCapture();
            //鼠标拖动事件
            function moveHandler(e) {
                if (!e)
                e = window.event;
                ObjScroll.ScrollHandle.style.marginTop = (e.clientY - deltaY) + "px";
                if((e.clientY - deltaY)<0)
          {ObjScroll.ScrollHandle.style.marginTop = 0 +"px";}
                else if((e.clientY - deltaY)>ObjScroll.MaxLength){ObjScroll.ScrollHandle.style.marginTop = ObjScroll.MaxLength +"px";}
          else{
           ObjScroll.ScrollBox.scrollTop = Math.floor((e.clientY - deltaY ) * ObjScroll.ScrollAmount);   
          }
            }
            //鼠标释放
            function upHandler(e){
                if (!e) e = window.event;
                document.onmouseup = "";
                document.onmousemove = "";
          document.onmouseout = "";
          if(document.all) ObjScroll.ScrollHandle.releaseCapture();
            }
         //鼠标移开
         function outHandler(e){
                if (!e) e = window.event;        
                document.onmouseup = "";
                document.onmousemove = "";
          document.onmouseout = "";
          if(document.all) ObjScroll.ScrollHandle.releaseCapture();
            }
        }
    }
    -->
    
    </script>
    
    
    
    
    
    
    <style type="text/css">
    .slidebar{20px;overflow:hidden;background-color:#ddd; margin-bottom:50px;}
    .scrollbox{float:left; 280px; height:500px;overflow:hidden; border:1px solid #ccc; font-size:12px;line-height:120%;}
    .handle{cursor:pointer;20px;background-color:#35356A;}
    #Friendcontent{padding-left:3px;}
    </style>
    </head>
    
    <body>
    
    
    
    
    
    
    
    
    <div class="wrap">
    
    
    <div class="scrollbox" id="scroll_1">
    	<div id="content_1">
    		<P style="TEXT-INDENT: 2em">北京大学法学院教授湛中乐正在等候全国人大的回应。</P>
    		<P style="TEXT-INDENT: 2em">7月5日上午11点,由他起草,5名学者和社会人士发起,另10名学者参与签名的两份快件,在北京大学邮局,发往前门西大街1号的全国人大地址。收件方为全国人大法工委和全国人大教科文卫委。</P>
    		<P style="TEXT-INDENT: 2em">他们在快件中递上《尽快启动全面修改的公民建议书》,他们建议,在尊重公民生育权的前提下,让公民自由而负责任地进行生育,按此基本精神,对计划生育法律进行修改。</P>
    		<P style="TEXT-INDENT: 2em">湛中乐在5日下午4点告诉本报,他们正在静候回音,预计全国人大当天就能收到快件。</P>
    		<P style="TEXT-INDENT: 2em">中国人口超低生育率已延续了20年之久。中国人民大学人口与发展研究中心教授顾宝昌告诉本报,目前并非计划生育一胎政策该不该调的问题,而是要讨论如何调。否则,低生育率造成的人口加速老龄化,以及人口负增长,将比原先预计的更早到来;一旦改革迟缓,或对经济社会产生难以估量的影响。</P>
    		<P style="TEXT-INDENT: 2em">本次建议书发起人为5名,即北京大学法学院教授湛中乐、北京大学社会学系教授李建新、携程旅行网董事长梁建章、北京某公司资深金融策略师黄文政、杭州平和国际英语学校校长洪秀平。</P>
    		<P style="TEXT-INDENT: 2em"><STRONG>超低生育率</STRONG></P>
    		<P style="TEXT-INDENT: 2em">姜明安等人呼吁的另一理由是,老龄化程度加深,劳动力总量将下降,迫使计划生育政策必须调整。</P><P style="TEXT-INDENT: 2em">刚刚公布的国家普查的生育率,也确实震惊学界。</P><P style="TEXT-INDENT: 2em">总和生育率是一个妇女一生生育的小孩数。根据国家统计局《中国2010年人口普查资料》,2010年中国妇女总和生育率为1.181,其中城市为0.8821,乡村为1.4375,镇为1.153,均大大低于国际公认维持人口正常更替需要的总和生育率2.1水平。</P>
    		<P style="TEXT-INDENT: 2em">南开大学人口与发展研究所教授原新告诉本报,1.181可能不准,比如低龄组小孩可能漏报,而中高龄的妇女可能重复统计(考虑到流动人口有2亿左右),实际的总和生育率可能在1.6上下,即便如此,1.6也太低。</P>
    	</div>
    </div>
    <div class="slidebar" id="scrollbar_1">
    	<div id="handle_1" class="handle"></div>
    </div>
    
    
    
    
    
    
    
    <div class="clr9"></div>
    <div class="clr9"></div>
    <div class="clr9"></div>
    
    <div class="scrollbox" id="scroll_2">
    	<div id="content_2">
    		<P style="TEXT-INDENT: 2em">原新介绍,过去几十年,总和生育率经历了一个跳水过程。在1971年是5.8,八十年代初期只有2.4,1992年是 2.1左右,为正常人口更替水平。此后一直在2以下。</P><P style="TEXT-INDENT: 2em">记者了解到,全国人口普查1990年时的数据显示,总和生育率是2.3,1995年变成1.5,2000年普查为1.22,即使进行科学口径调整,最终也只是1.4,2005年抽样调查总和生育率为1.34,2010年为1.18。</P>
    		<P style="TEXT-INDENT: 2em">原新等学者直言,按此计算,中国已经有20年的超低生育率时间。</P>
    		<P style="TEXT-INDENT: 2em">总和生育率水平过低,带来的直接问题是,老龄化加快,同时劳动力总量减少。有学者判断,从2013年开始全国劳动年龄人口将下降。</P>
    		<P style="TEXT-INDENT: 2em">顾宝昌介绍,根据预测,从2010到2032年,中国60岁及以上老年人口比例将会增加,达到26.69%, 2050年老年人口将达到4.4亿,占总人口规模的34.78%。</P>
    		<P style="TEXT-INDENT: 2em">中国社会科学院数目经济与技能经济研究所说明室主任李军预计,到2050年用于养老、医疗、照料、福利与设施方面的费用占GDP的比例将由2015年的6.62%提高到23.31%,增加16.7个百分点。</P>
    		<P style="TEXT-INDENT: 2em">来自不久前北京“应对老龄化挑战论坛”的数据显示,中国的老龄化速度是美国的三倍,但养老金积累的规模才是美国的1%。老龄化加快,使得目前养老基金出现了大的资金窟窿。有机构预测养老金缺口为18万亿元,也有说8万亿元。</P><P style="TEXT-INDENT: 2em">清华大学社保中心教授杨燕绥认为,哪个数字准确尚难定论,但 2020年中国即将进入深度老龄化是肯定,必须未雨绸缪。</P>
    		<P style="TEXT-INDENT: 2em"><STRONG>延退还是放二胎?</STRONG></P>
    		<P style="TEXT-INDENT: 2em">具体到人口危机的解决办法,延长退休年龄,或者调整一胎政策,是通行做法。</P>
    		<P style="TEXT-INDENT: 2em">南开大学人口与发展研究所教授原新就认为,目前单纯延长退休年龄意义不大,因为目前中国居民的平均寿命比国外少七八年。即使实施退休年龄,也只能每年延长几个月,60岁退休年龄延长到65岁,可能需要10-20年的过渡期。</P>
    		<P style="TEXT-INDENT: 2em">顾宝昌认为,解决老龄化等问题,还是要放弃一胎计划生育政策。</P>
    		<P style="TEXT-INDENT: 2em">顾指出,之前试点未实行计划生育的恩施等地,实际生育率比全国平均水平还低,“部分说明即使放开二胎,也不会导致生育率上升”。</P><P style="TEXT-INDENT: 2em">顾宝昌还认为,留给我们的时间已不多,70后妇女最小的已经是33岁,80后生育意愿在逐渐减小。</P>
    		<P style="TEXT-INDENT: 2em">上海市计生委对2009年年龄在20-45岁的户籍人口,及在上海居住半年以上的来沪流动人口的生育意愿抽样调查显示,上海户籍人口不愿生育者的比重占7.93%,比2003年上升3.37%。</P>
    		<P style="TEXT-INDENT: 2em">北京行政学院教授马小红也认为,适龄妇女生育意愿降低的情况,在北京也普遍存在,尤其是80后。2010年人口普查数据也判断,20-34岁的生育高峰期育龄妇女在2015年后将迅速减少。</P>
    		<P style="TEXT-INDENT: 2em">北京大学社会学系郭志刚教授直言,从第六次人口普查反映的数据看,全国总和生育率,已经下降到1.6,低于正常情况下人口更替2.1左右的水平。按此看每个新一代人,将比上一代人少。</P>
    		<P style="TEXT-INDENT: 2em">郭建议,逐步使生育率接近于更替水平,“1.94甚至2.0以上的生育率更好”。</P>
    		<P style="TEXT-INDENT: 2em">“人口政策属于国家战略政策,短期不像非典等非常紧急,但是长期不调整,等到问题出现,再调整了,则没有了机会。”参与此次上书的人口学者郭教授直言。</P>
    		<P style="TEXT-INDENT: 2em">(据南方网)</P>
    	</div>
    </div>
    <div class="slidebar" id="scrollbar_2">
    	<div id="handle_2" class="handle"></div>
    </div>
    
    
    
    
    
    
    <script>InitScrollBar('scroll_1','content_1','scrollbar_1','handle_1',300);</script>
    <script>InitScrollBar('scroll_2','content_2','scrollbar_2','handle_2',500);</script>
    </body>
    </html>
    

      

  • 相关阅读:
    maven
    git 流程
    配置错误:不能在此路径中使用此配置节。如果在父级别上锁定了该节,便会出现这种情况。锁定是默认设置的(
    ui选型
    重构
    http网站上传文件大小问题【没测试过】
    分页sql写法【只用最新的】
    dom响应事件
    html多个水平并列组件自适应等高的做法
    js写法【3】
  • 原文地址:https://www.cnblogs.com/huanlei/p/2580590.html
Copyright © 2011-2022 走看看