您当前所在位置：首页 > 网络编程 > CSS/HTMLCSS/HTML css层滚动条 css层滚动条 互联网 2008-04-29CSS/HTML9055 比较有特色的滚动条效果代码 <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='none'; } } //--> </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;$('scroll_bar').style.background='#efefef'"); //--> </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> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行] 很赞哦！() 感谢每一位辛勤著写的作者，感谢每一位的分享！ 免责声明：以上内容(文字、图片)收集于互联网，版权归原作者所有，如有侵犯您的原创版权请告知(604811667@qq.com)，我们将尽快删除相关内容，感谢您的理解与支持！ 本文地址：http://www.ku3.com.cn/show/5906.html 上一篇 超级连接的提示中换行效果实现代码 超级连接的提示中换行效果实现代码 下一篇 div+css如何实现页脚的置底 比较有特色的滚动条效果代码 大图广告（830*140）
