快捷導(dǎo)航

圖片與JavaScript配合做出個(gè)性滾動(dòng)條

更新時(shí)間：2009年10月18日 00:46:43 作者：

如果你想定制出一個(gè)漂亮的滾動(dòng)條的話,這個(gè)JS特效可能會(huì)適合你,不過代碼稍嫌麻煩些,但效果真的不錯(cuò),代碼含有中文注釋,學(xué)習(xí)也是不錯(cuò)的,希望朋友們喜歡.

<!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=utf-8" /> <title>圖片與JavaScript配合做出個(gè)性滾動(dòng)條</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:500px; height:300px; margin:100px 0 100px 80px; border:1px solid #369; overflow:hidden; } #content { width:520px; 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(//img.jbzj.com/demoimg/200910/un_bg_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 class="wppm3vysvbp" id="out"> <div class="wppm3vysvbp" id="content"> fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs </div> <div class="wppm3vysvbp" id="scrollBar"> <div class="wppm3vysvbp" id="scrollBarTop" class="scroll_bar_top"></div> <div class="wppm3vysvbp" id="scrollBarHandle"></div> <div class="wppm3vysvbp" id="scrollBarBottom" class="scroll_bar_bottom"></div> </div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: