• 1F服饰

    广州明生医药有限公司

    关于我们 健康生活

    • 关于我们
    • 健康生活

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

    网络编程 jQuery仿京东商城楼梯式导航定位菜单 06-22

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

    查看图片

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

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

    jquery判断对象是否为空并遍历对象的简单实例
    javascript:if(document.getElementById("target_obj_id")){}else{}jquery:因为$(#target_obj_id)不管对象是否存在都会返回object,所以以上方法不行1.vartarget_obj=jQuery('#target_ob

    jQuery实现日期联动效果实例
    本文实例讲述了jQuery实现日期联动效果的方法。分享给大家供大家参考,具体如下:实现目标:两个日期,有下拉框:head//导入jquery地址scriptsrc="jquery-1.

    基于jQuery实现页面搜索功能
    jQuery实现页面搜索,搜索筛选用户输入的内容!HTML:divclass="table"tabletrid="theader"th姓名/thth性别/thth联系方式/th/trtrtd客服/tdtd女/tdtd161654466/td/trtrtd掌柜/tdtd


    编辑:广州明生医药有限公司

    标签:对象,函数,实例,菜单,日期

    分享:
    • MySQL中SQL变量的使用方法(mysql中sql变量)
    • Oracle客户端修复快速准确的解决方案(oracle修复客户端)
    • Oracle 2011开启新视野升级新潮流(oracle2011)
    • Oracle 12c标志着新一代数据库时代的到来(oracle12cnbu)
    • 轻松插入数据MySQL表插入教程(mysql一张表插入)
    • 尝试探索Oracle的中文名称(oracle中文名叫啥)
    • MySQL case语法,轻松实现数据分类汇总(mysql中case语法)
    • 数据库MySQL精通:创建关系型数据库实例(mysql创建关系)
    • 的申请申请Oracle数据库的序列号(oracle数据库序列号)
    • Oracle 视图 ALL_ANALYTIC_VIEWS_AE 官方解释,作用,如何使用详细说明
    © 祺平科技 • 版权所有 粤ICP备2023061218号     技术支持  ZMCMS.COM