前端案例--仿京东商城楼梯式导航定位菜单
来源:互联网 发布:数据库如何去重复 编辑:程序博客网 时间:2024/04/30 19:57
实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项!
涉及知识点:find()、parent()、offset()、scroll()等jQ函数,请自觉复习各种函数!
html代码:
<!-- 导航菜单 --> <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代码:
#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代码:
$(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结构设计,需要理清滚动导航时候的条件判断。
3 0
- 前端案例--仿京东商城楼梯式导航定位菜单
- jQuery滚动监听,实现商城楼梯式导航
- [前端] 导航项定位
- jquery仿京东导航,仿淘宝商城左侧分类导航菜单,jquery实现下拉菜单效果
- 网易商城CSS下拉菜单导航 [收藏]
- css纵向商城分类导航菜单
- 竖式菜单---纯CSS京东商城分类导航菜单代码
- 网站导航菜单设计案例
- jQuery滚动监听,实现商城楼梯式导航、滚动监听根据滚动条所处的位置来自动更新导航项
- 前端小案例分享:京东电梯式导航制作
- 商城楼梯效果
- 黑马商城项目_导航条圆点的定位
- zepto商城顶部分类导航下拉菜单代码
- 模仿京东商城首页多级导航菜单
- 商城导航
- 最新网站导航菜单设计案例欣赏
- 导航菜单及圆角案例
- 前端设置- 仿Chinaz首页菜单导航
- 2个队列实现一个栈
- bzoj3437 小P的牧场
- swift中解决闭包循环引用的几种方式
- 120_算法工作模式填充模式
- leetcode hard level(part)
- 前端案例--仿京东商城楼梯式导航定位菜单
- 121_非对称加密
- JavaScript中的匿名函数及函数的闭包
- bzoj1096【ZJOI2007】仓库建设
- 122_findViewById原理
- 函数表达式
- 在页面中展示缓慢加载的图标
- Linux-python 安装,学习
- 123_inflate原理一