DIV CSS 佈局教程網
設為首頁
加入收藏
首頁
HTML基礎知識
CSS入門知識
JavaScript入門知識
DIV+CSS佈局
WEB網站前端
網頁腳本
網頁SEO優化
網頁制作工具
DIV+CSS佈局教程網
>>
網頁腳本
>>
CSS入門知識
>>
CSS進階教程
>> 層滾動條
層滾動條
編輯：CSS進階教程
<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="這個是用層做的滾動條!"; 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>
提示：您可以先修改部分代碼再運行，復制代碼和保存代碼功能在Firefox下無效。
上一頁:
點擊才出現驗證碼
下一頁:
隱藏滾動條
CSS進階教程
支持Web標准在中國
Web standards in China By Hen
推薦一份不錯的reset.css
網頁制作poluoluo文章簡介：但從 2004 年到現在，已經一晃眼 5 年了。曾經的一些考慮，比
通過宜家的家具設計方法學習CSS模塊化
網頁制作WEB文章簡介：去過宜家的同學應該都有注意到，宜家的家具基本都是組合的，可拆裝。模塊化的特點
相關文章
jquery實現圖片平滑滾動詳解
DIV滾動條設置添加 CSS滾動條顯示與滾動條隱藏
css overflow:auto超出高度或寬度出現滾動條
Ajax UpdatePanel 回傳後滾動條位置變更解決方法
如何避免IE7中Zoom功能放大滾動條
滾動字幕的制作 marquee
左右圖片循環滾動停頓一下後繼續
圖片左右循環連續滾動代碼，解決marquee的留白問題
用CSS代碼輕松Diy你的網頁滾動條
上下連續無間斷滾動圖像[網頁特效]
CSS基礎知識
Sass教程
CSS3基礎
關於CSS
CSS進階教程
DIV十CSS布局
CSS特效代碼
CSS詳解
小編推薦
CSS3教程(3):border-color網頁邊框色彩
CSS教程：快速提升設計可讀性和維護性
跨浏覽器的CSS3產生器:CSS3 please
將CSS按照層疊式結構化重新組織與構建
HTML+CSS網頁制作實例:制作左上角卷角效果的網頁
不必需的樣式腳本文件導致頁面不能及時更新
css定位與定位應用詳解
引入css樣式表的四種方式介紹
CSS網頁設計實例:商旅網首頁的標簽切換
CSS網頁設計時關於字體大小的設計
熱門推薦
CSS模塊化如何實現？
多個css、js文件自動合並、壓縮
CSS教程—元素的定位
清理無用的CSS樣式比較有用的幾個工具
CSS3偽類選擇器：nth-child()
CSS3實例教程:hover、active和:focus偽選擇器
CSS教程:最基本的條狀圖表
學完CSS後該學什麼？
簡單實用的網頁表格特效
大家都在看
JS選中checkbox後獲取table內一行TD所有數據的方法
JavaScript獲取當前網頁最後修改時間的方法
JavaScript怎麼實現異步編程模式？
JavaScript中變量的相互引用
深入學習DIV CSS設計中常見問題解決辦法(3)
HTML 5與Flash技術優缺點大比拼
javascript設置連續兩次點擊按鈕時間間隔的方法
datagrid框架的刪除添加與修改
XML學習教程
|
jQuery入門知識
|
AJAX入門
|
Dreamweaver教程
|
Fireworks入門知識
|
SEO技巧
|
SEO優化集錦
|
Copyright ©
DIV+CSS佈局教程網
All Rights Reserved