利用js实现自定义滚动条特效



35 139 47



特效描述:利用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

加群请备注:从官网了解到