现在的位置: 首页 > 综合 > 正文

JS+CSS实现网页滚动条美化

2012年04月27日 ⁄ 综合 ⁄ 共 6975字 ⁄ 字号 评论关闭

 

 

 

<!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{width:20px;overflow:hidden;background-color:#ddd; margin-bottom:50px;}
.scrollbox{float:left; width:280px; height:500px;overflow:hidden; border:1px solid #ccc; font-size:12px;line-height:120%;}
.handle{cursor:pointer;width: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>

  

 

 

 

 

 

 

 

 

 

 

 

 

【上篇】
【下篇】

抱歉!评论已关闭.