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 相关文章推荐
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
常用的js方法合集
Mar 10 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 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 中的str_replace 函数总结
2007/04/27 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
自动更新作用
2006/10/08 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python分割文件的常用方法
2014/11/01 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
python实现外卖信息管理系统
2018/01/11 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
服装厂厂长岗位职责
2013/12/27 职场文书
银行委托书范本
2014/04/04 职场文书
防灾减灾活动总结
2014/08/30 职场文书
法人授权委托书样本
2014/09/19 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript