个性的网页 scrollBar 滚动条代码

发布时间：2018-09-07 10:22 所属栏目：30 来源：站长网

导读：烈火网(LieHuo.Net)教程如果你想定制出一个漂亮的滚动条的话,这个JS特效可能会适合你,不过代码稍嫌麻烦些,但效果真的不错,代码含有中文注释,学习也是不错的,希望朋友们喜欢. !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.

　　烈火网(LieHuo.Net)教程如果你想定制出一个漂亮的滚动条的话,这个JS特效可能会适合你,不过代码稍嫌麻烦些,但效果真的不错,代码含有中文注释,学习也是不错的,希望朋友们喜欢.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>图片与<b>Java</b>Script配合做出个性滚动条 - liehuo.net</title> <style type="text/css"> * { margin:0; padding:0; } body { margin:20px 0 400px 20px; font:12px Arial; } h1 { font-size:14px; } ol { margin:20px; line-height:160%; } #out { position:relative; width:600px; height:300px; margin:100px 0 100px 80px; border:1px solid #369; overflow:hidden; } #content { width:620px; height:100%; overflow:auto; -moz-user-select:none; } #scrollBar,#scrollBarHandle,.scroll_bar_top,.scroll_bar_top_a,.scroll_bar_bottom,.scroll_bar_bottom_a { background-image:url(http://www.veryhuo.com/uploads/allimg/0910/liehuonet_scrollBar.gif); } #scrollBar { position:absolute; top:0; right:0; z-index:9; width:14px; height:100%; background-repeat:repeat-y; background-position:-42px 0; float:left; } #scrollBarTop,#scrollBarHandle,#scrollBarBottom { position:absolute; left:0; cursor:default; } #scrollBarTop,#scrollBarBottom { width:100%; height:14px; color:#fff; text-align:center; } #scrollBarTop { top:0; } #scrollBarBottom { bottom:0; } #scrollBarHandle { width:100%; background-repeat:repeat-y; background-position:-28px 0; } .scroll_bar_top { background-position:0 0; } .scroll_bar_top_a { background-position:-14px 0; } .scroll_bar_bottom { background-position:-56px 0; } .scroll_bar_bottom_a { background-position:-70px 0; } </style> </head> <body> <div id="out"> <div id="content"> <p><br>　　<strong>烈火网(</strong><a target="_blank" href="http://www.veryhuo.com/" _fcksavedurl="http://www.veryhuo.com/"><strong>LieHuo.Net</strong></a><strong>)讯 </strong>各位网友，烈火网（<a href="http://www.veryhuo.com/" _fcksavedurl="http://www.veryhuo.com/">LIEHUO.NET</a>）经过了六年多的风雨，成长至今，尽管我们中途多次放弃站点的更新和维护，但是，坚持始终是我们不变的信念。自从09年初，我们正式加大人力与物资以来，烈火既得了较好的成绩，在这里衷心的向支持我们的网友说一声，谢谢！</p> <p align="center"><br><img style="CURSOR: pointer" onclick="window.open('/uploads/allimg/090831/1_090831130012_1.jpg')" height="183" alt="烈火网(liehuo.net)提示：点击新窗口预览！" width="452" border="0" src="http://www.veryhuo.com/uploads/allimg/090831/1_090831130012_1.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/allimg/090831/1_090831130012_1.jpg" /><br />烈火网(LIEHUO.NET)的ALEXA网站排名</p> <p><br>　　2009年8月，在这个月里，我们的网站（<a href="http://www.veryhuo.com/" _fcksavedurl="http://www.veryhuo.com/">http://www.veryhuo.com/</a>）ALEXA世界排名进入10万（日IP约1.5万左右），可能对于大家来说这并不是什么值得骄傲的事情，但是对于我们，这是大事记，这是我们不断努力的结果！在以后的日子里，我们会更加努力的做站，做好站！关注每一位站长，为建设互联网贡献微薄的力量！</p> <p><br>　　ALEXA网站排名查询(烈火网提供)：<a href="http://alexa.liehuo.net/" _fcksavedurl="http://alexa.liehuo.net/">http://alexa.liehuo.net/</a></p> <p><br>　　ALEXA网站排名查询(站长站提供)：<a href="http://alexa.chinaz.com/" _fcksavedurl="http://alexa.chinaz.com/">http://alexa.chinaz.com/</a></p> </div> <div id="scrollBar"> <div id="scrollBarTop" class="scroll_bar_top"></div> <div id="scrollBarHandle"></div> <div id="scrollBarBottom" class="scroll_bar_bottom"></div> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' _fcksavedurl='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）