jQuery仿京东商城楼梯式导航定位菜单
内容摘要
实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项!
涉及知识点:find()、parent()、offset()、scroll()等jQ函数,请自觉复习各种函数!
html代码:
<!-- 导航菜单 -
涉及知识点:find()、parent()、offset()、scroll()等jQ函数,请自觉复习各种函数!
html代码:
<!-- 导航菜单 -
文章正文
实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项!
涉及知识点:find()、parent()、offset()、scroll()等jQ函数,请自觉复习各种函数!
html代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!-- 导航菜单 --> <div id= "menu" > <ul> <li>1F<span>服饰</span></li> <li>2F<span>美妆</span></li> <li>3F<span>手机</span></li> <li>4F<span>家电</span></li> <li>5F<span>数码</span></li> <li>6F<span>运动</span></li> <li>7F<span>居家</span></li> <li>8F<span>母婴</span></li> <li>9F<span>食品</span></li> <li>10F<span>图书</span></li> <li>11F<span>服务</span></li> </ul> </div> <!-- 导航菜单 --> <!-- 产品内容 --> <div id= "content" > <img src= "images/head.png" alt= "" style= "border:1px solid red;" > <div class = "louti" id= "louti1" ><img src= "images/f1.png" alt= "" ></div> <div class = "louti" id= "louti2" ><img src= "images/f2.png" alt= "" ></div> <div class = "louti" id= "louti3" ><img src= "images/f3.png" alt= "" ></div> <div class = "louti" id= "louti4" ><img src= "images/f4.png" alt= "" ></div> <div class = "louti" id= "louti5" ><img src= "images/f5.png" alt= "" ></div> <div class = "louti" id= "louti6" ><img src= "images/f6.png" alt= "" ></div> <div class = "louti" id= "louti7" ><img src= "images/f7.png" alt= "" ></div> <div class = "louti" id= "louti8" ><img src= "images/f8.png" alt= "" ></div> <div class = "louti" id= "louti9" ><img src= "images/f9.png" alt= "" ></div> <div class = "louti" id= "louti10" ><img src= "images/f10.png" alt= "" ></div> <div class = "louti" id= "louti11" ><img src= "images/f11.png" alt= "" ></div> </div> <!-- 产品内容 --> <!-- 底部 --> <div id= "footer" class = "container" ></div> |
css代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | #menu{ width:32px;height:360px; position:fixed; top:200px;left:0px; display: none; } #menu ul li{ width:32px;height:32px; list-style-type:none; color:#8F8583; text-align:center; line-height: 32px; border-bottom:1px dotted #ddd; position:relative; } #menu ul li span{ display:block;width:32px;height:32px; background:#C81623; position:absolute; top:0;left:0; color:#fff;font-size:12px; display: none; } #menu ul li:hover span{display:block; } #menu ul li span.active{color:#C81623;background:#fff;display:block;} #content{ width:1220px; margin:0 auto; } #footer{width:1220px;height:600px;background:#FE7678;} .container{margin:0 auto;} |
jQuery代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $( function (){ var _index=0; $( "#menu ul li" ).click( function (){ $(this).find( "span" ).addClass( "active" ).parent().siblings().find( "span" ).removeClass( "active" ); _index=$(this).index()+1; //通过拼接字符串获取元素,再取得相对于文档的高度 var _top=$( "#louti" +_index).offset().top; //scrollTop滚动到对应高度 $( "body,html" ).animate({scrollTop:_top},500); }); var nav=$( "#menu" ); //得到导航对象 var win=$(window); //得到窗口对象 var sc=$(document); //得到document文档对象。 win.scroll( function (){ if (sc.scrollTop()>=600){ $( "#menu" ).show(); //获取滚动元素对应的索引!!!重难点 var index=Math. floor (sc.scrollTop()/600); $( "#menu ul li span" ).eq(index-1).addClass( "active" ).parent().siblings().find( "span" ).removeClass( "active" ); } else { $( "#menu" ).hide(); } }); }); |
滚动中常用到的jQ写法:
$("body,html").animate({scrollTop:_top},500);
总结:相对来说,这是个蛮有趣的实践案例,但其中用到比较多的函数,结合了本案例比较特殊的html结构设计,需要理清滚动导航时候的条件判断。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持phpstudy。
代码注释