jQuery仿京东商城楼梯式导航定位菜单


Posted in Javascript onJuly 25, 2016

实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项!

jQuery仿京东商城楼梯式导航定位菜单

涉及知识点: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结构设计,需要理清滚动导航时候的条件判断。 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 #Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 #Javascript
前端微信支付js代码
Jul 25 #Javascript
javascript与jquery动态创建html元素示例
Jul 25 #Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 #Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 #Javascript
js微信分享API
Oct 11 #Javascript
You might like
社区(php&amp;&amp;mysql)一
2006/10/09 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
浅谈Python中的数据类型
2015/05/05 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
python文字转语音的实例代码分析
2019/11/12 Python
python 回溯法模板详解
2020/02/26 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
读书心得体会
2013/12/28 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
超市理货员岗位职责
2014/07/04 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
Redis Lua脚本实现ip限流示例
2022/07/15 Redis