利用js實現自定義滾動條特效



38 150 51



特效描述:利用js實現 自定義 滾動條特效,利用js實現自定義滾動條特效

代碼結構

1. HTML代碼

<div id="box">
    <div class="list">
        <ul>
            <li><img src="img/1.jpg" /><p>iPhone 4</p></li>
            <li><img src="img/2.jpg" /><p>iPad 2</p></li>
            <li><img src="img/3.jpg" /><p>iPod touch</p></li>
            <li><img src="img/4.jpg" /><p>iPod classic</p></li>
            <li><img src="img/5.jpg" /><p>iPod shuffle</p></li>
            <li><img src="img/6.jpg" /><p>iPod nano</p></li>
            <li><img src="img/7.jpg" /><p>MacBook Air</p></li>
            <li><img src="img/8.jpg" /><p>MacBook Pro</p></li>
            <li><img src="img/9.jpg" /><p>Mac mini</p></li>
            <li><img src="img/10.jpg" /><p>Mac Pro</p></li>
        </ul>
    </div>
    <!--/list-->
    <div class="scrollBar">
        <div class="barL"></div>
        <div class="barM">
            <div class="bar">
                <div class="l"></div>
                <div class="r"></div>
            </div>
        </div>
        <div class="barR"></div>
    </div>
    <!--/scrollBar-->
</div>
<!--/box-->
<dl id="desc">
    <dt>功能說明:</dt>
    <dd>① 拖動滾動條,圖片列表緩沖滑動至目標點;</dd>
    <dd>② 滾動條兩端鼠標移入自動滑動;</dd>
    <dd>③ 滾動條滑動到兩端自動更換為停止標識;</dd>
    <dd>④ 點擊滾動條黑色背景區,滾動條及圖片列表緩沖滑動至目標點;</dd>
    <dd>⑤ 支持鍵盤左右鍵;</dd>
    <dd>⑥ 支持鼠標滾輪。</dd>
    <dd class="ta-r">By — Ferris</dd>
</dl>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滾動切換 滾動條切換 滑動選項卡 滑動切換 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 其他 鼠標懸停 滾動切換 滾動條切換 圖片切換 圖片選項卡 圖標選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表