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