css：clip能夠替代隱藏overflow

clip:rect(top,right,bottom,left);position:absolute;

 

網頁進度就能夠經過clip:rect實現紅色進度區域

<style> 　　.progressBox{width:300px;height:40px;border:1px solide #282828;background:#19191d;position:absolute;} 　　.progress{position:absolute;top:0;left:0;width:100%;line-height:40px;} 　　.progressBar{z-index:2;background:#ff5454;color:#282828;clip:rect(0,0,140,0);} 　　.progressText{z-index:1;background:#282828;color:#ff5454;}
</style>
<div class="progressBox">
　　<div class="progress progressBar">0%</div>
   <div class="progress progressText">0%</div>
</div>
<script>
　　var progressBox=$(''.progressBox"); 　　var progressBar=$(".progressBar"); 　　var progressText=$(".progressText"); 　　var totalWidth=progressBox.width(); 　　var iNow=0; 　　var timer=setInterval(function(){ 　　　　iNow+=2; 　　　　if(iNow>100){ 　　　　　　clearInterval(timer); 　　　　}else{ 　　　　　　progressFn(iNow); 　　　　} 　　},30); 　　progressFn(cent){ 　　　　progressBar.css({clip:'rect(0,'+cent/100*totalWidth+'px,140px,0)'}) 　　} </script>