cari

Rumah  >  Artikel  >  hujung hadapan web  >  bar skrol lapisan css_Pertukaran pengalaman

bar skrol lapisan css_Pertukaran pengalaman

PHP中文网
PHP中文网asal
2016-05-16 12:06:092081semak imbas
css layer scroll bar_experience exchange
<html> 
<head><title>层滚动条DIY - Powered by yexj00</title> 
<style> 
<!-- 
*{ font-size: 12px} 
--> 
</style> 

<script language="Javascript"> 
<!-- 
 function $(obj){ 
return document.all[obj]; 
 } 
 function setbarHeight(){  
$("scroll_bar").style.height=($("scroll_content").clientHeight)/($("scroll_content").scrollHeight)*
($("scroll_area").offsetHeight)+"px"; 
if($("scroll_bar").offsetHeight>=$("scroll_area").offsetHeight){ 
$("scroll_bar").style.display=&#39;none&#39;; 
  } 
 } 
//--> 
</script> 

<script language="Javascript"> 
<!-- 
var drag=false; //是否允许拖动 
var mx,my; 
var scrollbar_L; 
var scrollbar_T; 
var scrollbar_W; 
var scrollbar_H; 
var scrollarea_T,scrollarea_H; 
var startT,startY; 

function getInfor(){ 
mx=event.clientX+document.documentElement.scrollLeft; 
my=event.clientY+document.documentElement.scrollTop;  
scrollbar_L=document.documentElement.clientLeft+$("outerDiv").
style.pixelLeft+$("scroll_area").offsetLeft+$("scroll_bar").offsetLeft; 
scrollbar_T=document.documentElement.clientTop+$("outerDiv").
style.pixelTop+$("scroll_area").offsetTop+$("scroll_bar").offsetTop; 
scrollbar_W=$("scroll_bar").offsetWidth; 
scrollbar_H=$("scroll_bar").offsetHeight; 
scrollarea_T=document.documentElement.clientTop+$("outerDiv").style.pixelTop+$("scroll_area").offsetTop; 
scrollarea_H=$("scroll_area").offsetHeight; 
} 

function dragit(){ 
getInfor(); 

if(event.srcElement.id=="scroll_bar"){ 
  drag=true; 
  $("scroll_bar").style.background="#cccccc"; 
  startT=$("scroll_bar").style.pixelTop; 
  startY=event.clientY; 
 document.onmousemove=move; 
   } 
 } 
function move(){ 
if(drag==true){ 
$("scroll_bar").style.pixelTop=startT+event.clientY-startY; 
$("scroll_content").scrollTop=$("scroll_bar").style.pixelTop/$("scroll_area").
offsetHeight*$("scroll_content").scrollHeight; 
if($("scroll_bar").style.pixelTop<=0){ $("scroll_bar").style.pixelTop=0} 
if($("scroll_bar").style.pixelTop>=(scrollarea_H-scrollbar_H)){  

$("scroll_bar").style.pixelTop=scrollarea_H-scrollbar_H; 
 } 
return false; 
   } 

 } 

document.onmousedown=dragit; 
document.onmouseup=new Function("drag=false;$(&#39;scroll_bar&#39;).style.background=&#39;#efefef&#39;"); 
//--> 
</script> 
</head> 
<body onload="setbarHeight()"> 
<div id="outerDiv" style="position:absolute; left:100px; top:50px; width:130px; height:130px"> 
  <div id="scroll_content" style="position:absolute; padding:2px; left:2px; top:5px; width:100px; 
  height:100px; border:1px solid #cccccc; overflow: hidden"> 

<!-- 这是层的内容区 --> 
<script language="Javascript"> 
<!-- 
var str="这个是用层做的滚动条,Powered by yexj00!"; 
str=str.split(""); 
for(i=0;i<str.length;i++){ 
document.write(str[i]+" <br>"); 
 } 
//--> 
</script> 
<!-- 层的内容区结束 --> 

  </div> 
  <div id="up_btt" style="position:absolute; left:104px; top:5px; width:8px; height:16px; background:#efefef; 
  font-size:0px;border:1px outset #cccccc"></div> 
  <div id="scroll_area" style=" position:absolute; left:104px; top:22px; width:8px; height:66px;font-size:0px; 
  background:#efefef"> 
      <div id="scroll_bar" style="position:absolute; left:0px; top:0px; width:8px; background:#efefef; 
      font-size:0px;border:1px outset #cccccc"></div> 
  </div> 
  <div id="down_btt" style="position:absolute; left:104px; top:89px; width:8px; height:16px; 
  background:#efefef;font-size:0px; border:1px outset #cccccc"></div> 
</div> 

</body> 
</html>

Di atas adalah kandungan css layer scroll bar_experience exchange Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php.cn)!


Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Iframe adaptif sangat serasi dengan iaitu, pertukaran berbilang pelayar_pengalaman firefoxArtikel seterusnya：Iframe adaptif sangat serasi dengan iaitu, pertukaran berbilang pelayar_pengalaman firefox

Artikel berkaitan

Lihat lagi