特效描述:滚动楼层。jQuery滚动楼层效果代码下载
代码结构
1. 引入JS
<script src="js/jquery-1.8.3.min.js"></script> <script src="js/js.js"></script>
2. HTML代码
<div id="loutinav"> <ul> <li class="active"><span>享品质</span> </li> <li><span>服饰美妆</span> </li> <li><span>电脑数码</span> </li> <li><span>3C运动</span> </li> <li><span>爱吃</span> </li> <li><span>母婴居家</span> </li> <li><span>图书汽车</span> </li> <li><span>虚拟</span> </li> <li><span>还没逛够</span> </li> <li class="last">顶部</li> </ul> </div> <!--楼层内容开始--> <div id="header"> 向下滚动鼠标查看效果 </div> <div id="main"> <div class="louti" style="background: #cc0033;"> 享品质 </div> <div class="louti" style="background: #999933;"> 服饰美妆 </div> <div class="louti" style="background: #ccff33;"> 电脑数码 </div> <div class="louti" style="background: #006633;"> 3C运动 </div> <div class="louti" style="background: #6666cc;"> 爱吃 </div> <div class="louti" style="background: #ff6600;"> 母婴居家 </div> <div class="louti" style="background: #ffff00;"> 图书汽车 </div> <div class="louti" style="background: #3333ff;"> 虚拟 </div> <div class="louti" style="background: #ff00cc;"> 还没逛够 </div> </div> <div id="footer"> 网站底部 </div> <!--楼层内容结束--> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div>