本性的网页 scrollBar 转动条代码

发布时间：2018-09-08 18:30:20 所属栏目：运营来源：站长网

导读：猛火网(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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

等等党又赢了，iPhone	450W高功耗卡皇名不虚
群联 PCIe 5.0 SSD一定	微星Modern 14 15笔记