澳门新萄京:jquery实现网页定位导航,jquery导航
分类:澳门新萄京最大平台

不清楚大家有未有理会到一些网页由于页面音信量太大所以使用了页面定位导航来实现跳转,点击旁边的美食指南的某一项页面就跳到那一项对应的开始和结果,并且大家滚动滚动条,当滚动到某一项内容,旁边菜单对应的那一项也会高亮展现。今日本人就来说讲这么的效力是什么样达成的。 

jquery达成网页定位导航,jquery达成导航

不亮堂大家有未有理会到部分网页由于页面新闻量太大所以使用了页面定位导航来贯彻跳转,点击旁边的美食做法的某一项页面就跳到那一项对应的剧情,况兼大家滚动滚动条,当滚动到某一项内容,旁边菜单对应的那一项也会高亮显示。明日自家就来说讲这么的效果是什么样贯彻的。 

先贴上海展览中心示效果: 

澳门新萄京 1

澳门新萄京 2

澳门新萄京 3

实现: 
以此的页面布局很简短,大家下去多试试就OK了,值得注意的是索要在菜单布局里的每贰个li里面增加a标签何况给a标签的 href 赋上相应的id号,能够让其点击登时跳到id对应的原委 

然后正是jquery是什么贯彻的: 

1.大家须求接纳$(document).scrollTop()获取滚动条相对最上端的可观

 2.通过$('#content').find('.item')[index].offset().top获取每一块内容相对顶端的莫斯中国科学技术大学学(作者是在id为content的div里饱含了5个class为item的div,每一个item对应四个板块的内容) 

3.然后相比每多个板块的$(document).scrollTop()是不是高于$('#content').find('.item')[index].offset().top,若超越表明页面已经来到了对应板块。 

4.提及底通过removeClass移除在此之前的高亮,给对应项增加addClass扩大高亮 

代码: 

上边是自家写的切实的demo,供大家参考:
 index.html 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>网页定位导航</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="menu">
 <ul>
  <li><a href="#item1" class="current">1F 男装</a></li>
  <li><a href="#item2">2F 女装</a></li>
  <li><a href="#item3">3F 美妆</a></li>
  <li><a href="#item4">4F 数码</a></li>
  <li><a href="#item5">5F 生活</a></li>
 </ul>
 </div>
 <div id="content">
 <h1>XX购物网</h1>
 <div id="item1" class="item">
  <h2>1F 男装</h2>
  <ul>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  </ul>
 </div>
 <div id="item2" class="item">
  <h2>2F 女装</h2>
  <ul>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  </ul>
 </div>
 <div id="item3" class="item">
  <h2>3F 美妆</h2>
  <ul>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  </ul>
 </div>
 <div id="item4" class="item">
  <h2>4F 数码</h2>
  <ul>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  </ul>
 </div>
 <div id="item5" class="item">
  <h2>5F 生活</h2>
  <ul>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  </ul>
 </div>
 </div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
 style.css


*{
 margin: 0;
 padding: 0;
}

body{
 font-size: 12px;
 line-height: 1.7;
}

li{
 list-style: none;
}

#content{
 width: 800px;
 margin: 0 auto;
 padding: 20px;
}

#content h1{
 color: #0088bb;
}

#content .item{
 padding: 20px;
 margin-bottom: 20px;
 border: 1px dotted #0088bb;
}

#content .item h2{
 font-size: 16px;
 font-weight: bold;
 border-bottom: 2px solid #0088bb;
 margin-bottom: 10px;
}

#content .item ul{
 width: 740px;
 margin: 0 auto;
}

#content .item li{
 display: inline;
 margin-right: 10px;
}

#content .item li a img{
 width: 230px;
 height: 230px;
 border: none;
}

#menu{
 position: fixed;/*固定定位*/
 top: 100px;
 left: 50%;
 margin-left: 400px;
 width: 80px;
}

#menu ul li a{
 display: block;
 margin: 5px 0;
 font-size: 14px;
 font-weight: bold;
 color: #333;
 width: 80px;
 height: 50px;
 line-height: 50px;
 text-decoration: none;/*去掉超链接的下划线*/
 text-align: center;
}

#menu ul li a:hover,
#menu ul li a.current{
 color: #fff;
 background: #0088bb;
}

/*ie6 hack 兼容ie的设置*/
* html, * html body {
  background-image: url(about:blank);
  background-attachment: fixed;
}

* html #menu {
  /*position: fixed;*/
  position: absolute;
  top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop) 100 'px');
}
 script.js


$(document).ready(function () {
 //监听滚动条
 $(window).scroll(function () {
 //获取滚动条到顶部的距离
 var top = $(document).scrollTop();
 var menu = $('#menu');
 var items = $('#content').find('.item');
 var currentId = "";//当前所在的楼层是(item) id
 items.each(function(){
  var s = $(this);
  //获取item到顶部的距离 即各个楼层到顶部的距离
  var itemTop = s.offset().top;
  //判断滚动条到顶部的距离是否大于item到顶部的距离,大于则说明当前页面已经显示到了当前item即楼层
  if(top > itemTop-200){
  //取到当前楼层
  currentId = "#"   s.attr("id");
  }else{
  return false;
  } 
 });
 //给相应楼层的a设置current,取消其他链接的current
 var currentLink = menu.find(".current");
 //判断currentId是否有值,当前有current的item是否等于要添加current的item,有就不必改变,没有就更改item的current,current是显示高亮的css类
 if(currentId && currentLink.attr("href") != currentId ){
  //移除有高亮的
  currentLink.removeClass('current');
  //添加当前页面显示楼层对应的菜单选项的高亮
  menu.find("[href="   currentId  "]").addClass('current');
 }
 });
});

上述正是本文的全体内容,希望对我们的学习抱有协助,也冀望大家多多帮忙帮客之家。

不领悟我们有未有理会到一些网页由于页面音讯量太大所以使用了页面定位导航来贯彻跳转,点击旁...

jQuery 浮动导航菜单适合购物商品等级次序的网址,jquery导航菜单

单页面网页内容很多,页面长度相当的大,要求有利高效的在页面包车型客车不一致地点张开一定,所以浮动菜单慢慢流行了起来,如下图 男装、女子衣服、美妆等。

澳门新萄京 4

这种菜单成效分为两某些:

1、点击菜单项,网页滚动到相应地点,可回顾通过锚点落成;

2、滚动页面包车型大巴时候,菜单项的当选状态要跟着变动,那就须要监听网页的滚动事件并透过一些计量来达成了;

澳门新萄京 5

计算 scrollTop 和 种种 div 的 offsetTop 的尺寸关系,判断今后网页展现的岗位在怎么样地点,再依赖测算的结果给相应的菜单项加多样式。比方第三个div 的 offset().top = 300, 第八个 div 的offset().top = 600,此时的 scrollTop = 400,表明现行反革命呈现的大多数是第三个 div 的职务,700 则是第多少个div。下边是贰个简练的例子:

<div id="menu">
<ul>
<li><a href="#item1" class="current">1F 男装</a></li>
<li><a href="#item2">2F 女装</a></li>
<li><a href="#item3">3F 美妆</a></li>
<li><a href="#item4">4F 数码</a></li>
<li><a href="#item5">5F 母婴</a></li>
</ul>
</div>
<div id="content">
<h1>网购</h1>

<div id="item1" class="item">
<h2>1F 男装</h2>
<ul>
<li><a href="#"><img src="" alt="澳门新萄京 6"/></a></li>
<!-- 若干个li -->
</ul>
</div>
<!-- 若干个item-->
</div>

* {margin: 0;padding: 0;}
body {font-size: 12px;line-height: 1.7;}
li {list-style: none;}
#content {width: 800px;margin: 0 auto;padding: 20px;}
#content h1 {color: #0088bb;}
#content .item {padding: 20px;margin-bottom: 20px;border: 1px dotted #0088bb;}
#content .item h2 {font-size: 16px;font-weight: bold;border-bottom: 2px solid #0088bb;margin-bottom: 10px;}
#content .item li {display: inline;margin-right: 10px;}
#content .item li a img {width: 230px;height: 230px;border: none;}
#menu{position:fixed;left:50%;margin-left:400px;top:100px;}
#menu ul li a {
display: block;
margin: 5px 0;
font-size: 14px;
font-weight: bold;
color: #333;
width: 80px;
height: 50px;
line-height: 50px;
text-decoration: none;
text-align: center;
}
#menu ul li a:hover,#menu ul li a.current {color: #fff;background: #0088bb;}

$(function(){
$(window).scroll(function(){
var scrollTop = $(document).scrollTop();
var contentItems = $("#content").find(".item");
var currentItem = "";
contentItems.each(function(){
var contentItem = $(this);
var offsetTop = contentItem.offset().top;
if(scrollTop > offsetTop-200){//此处的200视具体情况自行设定,因为如果不减去一个数值,在刚好滚动到一个div的边缘时,菜单的选中状态会出错,比如,页面刚好滚动到第一个div的底部的时候,页面已经显示出第二个div,而菜单中还是第一个选项处于选中状态
currentItem = "#"   contentItem.attr("id");
} 
});
if(currentItem&&currentItem!=$("#menu").find(".current").attr("href")){
$("#menu").find(".current").removeClass("current");
$("#menu").find("[href="   currentItem   "]").addClass("current");
}
});
});

jQuery 浮动导航菜单(购物网址商品类别),jquery导航菜单

单页面网页内容比较多,页面长度不小,供给有利快速的在页面包车型地铁比不上地方张开一定,所以浮动菜单渐渐流行了起来,如下图 男装、女子衣裳、美妆等。

澳门新萄京 7

这种菜单功效分为两有的:

1、点击菜单项,网页滚动到对应地点,可回顾通过锚点完毕;

2、滚动页面包车型大巴时候,菜单项的当选状态要跟着变动,那就须要监听网页的滚动事件并由此有个别计量来兑现了;

澳门新萄京 8

计量 scrollTop 和 各种 div 的 offsetTop 的大小关系,判定现在网页呈现的岗位在怎么地方,再依附测算的结果给相应的菜单项增添样式。比方第三个div 的 offset().top = 300, 第2个 div 的offset().top = 600,此时的 scrollTop = 400,表明现行反革命展现的大大多是第一个 div 的职分,700 则是第多少个div。上边是七个简便的例子:

 

<div id="menu">
    <ul>
        <li><a href="#item1" class="current">1F 男装</a></li>
        <li><a href="#item2">2F 女装</a></li>
        <li><a href="#item3">3F 美妆</a></li>
        <li><a href="#item4">4F 数码</a></li>
        <li><a href="#item5">5F 母婴</a></li>
    </ul>
</div>
<div id="content">
    <h1>网购</h1>

    <div id="item1" class="item">
        <h2>1F 男装</h2>
        <ul>
            <li><a href="#"><img src="" alt="澳门新萄京 9"/></a></li>
            <!-- 若干个li -->
        </ul>
    </div>
    <!-- 若干个item-->
</div>

 

     * {margin: 0;padding: 0;}
        body {font-size: 12px;line-height: 1.7;}
        li {list-style: none;}
        #content {width: 800px;margin: 0 auto;padding: 20px;}
        #content h1 {color: #0088bb;}
        #content .item {padding: 20px;margin-bottom: 20px;border: 1px dotted #0088bb;}
        #content .item h2 {font-size: 16px;font-weight: bold;border-bottom: 2px solid #0088bb;margin-bottom: 10px;}
        #content .item li {display: inline;margin-right: 10px;}
        #content .item li a img {width: 230px;height: 230px;border: none;}
        #menu{position:fixed;left:50%;margin-left:400px;top:100px;}
        #menu ul li a {
            display: block;
            margin: 5px 0;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            width: 80px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            text-align: center;
        }
        #menu ul li a:hover,#menu ul li a.current {color: #fff;background: #0088bb;} 

    $(function(){
           $(window).scroll(function(){
               var scrollTop = $(document).scrollTop();
               var contentItems = $("#content").find(".item");
               var currentItem = "";
               contentItems.each(function(){
                   var contentItem = $(this);
                   var offsetTop = contentItem.offset().top;
                   if(scrollTop > offsetTop-200){//此处的200视具体情况自行设定,因为如果不减去一个数值,在刚好滚动到一个div的边缘时,菜单的选中状态会出错,比如,页面刚好滚动到第一个div的底部的时候,页面已经显示出第二个div,而菜单中还是第一个选项处于选中状态
                       currentItem = "#"   contentItem.attr("id");
                   }                   
               });
               if(currentItem&&currentItem!=$("#menu").find(".current").attr("href")){
                   $("#menu").find(".current").removeClass("current");
                   $("#menu").find("[href="   currentItem   "]").addClass("current");
               }
           });
       });

 

单页面网页内容比较多,页面长度异常的大,需求有利高效的在页面包车型客车两样职责张开定位,所以浮动菜单慢慢流行了起来,如下图 男装、女子衣裳、美妆等。

先贴上呈现效果: 

jquery怎调节当前页的领航菜单功用?

比方说导航的div <div class="nav"><a href="index.html">首页</a><a href="product.html">产品</a><a href="case.html">案例核心</a></div>

下面的html内容:
<div class="main">
<div class="content">首页的内容</div>
<div class="content">产品的内容</div>
<div class="content">案例中央的内容</div>
</div>
关于class=“content”能够是您和煦丰盛的为了便利jQuery获取,未有那几个样式类
<script type="text/javascript">
$(document).ready(function()
{
var tabs = $('.nav > a');
var cons = $('.main > div.content');

tabs.first().addClass("now").show(); //暗中同意第三个展现
cons.first().show().nextAll().hide(); //暗中同意第一个显示,别的掩饰
tabs.each(function(index){
$(this).mouseover(function(){
$(this).addClass("now").siblings().removeClass("now");
cons.eq(index).show().siblings().hide();
});
});

});
</script>  

自己用jquery做的领航栏点击时把二级菜单全呈现出来了,怎让他只展现二个,正是点这

自己的建议是您在要点击的列表上给各样选项增多名字,名字和后边要具体的列表类名一致
<li name="tr">Home</li>
<li name="tr1">主页二</li>
<li name="tr2">主页3</li>
<li name="tr3">主页4</li>
<li name="tr4">主页5</li>
<li name="tr5">主页6</li>
<li name="tr6">主页7</li>
<li name="tr7">主页8</li>

然后jquery
$(document).ready(function(){

$('#td li').click(function(){
$("#men ." $(this).attr("name")).css("display", "inline");
});
});  

澳门新萄京 10

澳门新萄京 11

对此JQuery底部导航浮动的插件

其一理应未有现有的插件
你能够把您的底部导航的css加上position:fixed;left:0;top:0就行了!~
当然这么些是始终在浏览器的左上角
您只要想要滚动条滚动一段距离后再展现出来的话能够用
$(window).scroll(function(){
if ($(document).scrollTop() > 300) //剖断滚动条是不是滚动了300PX
$("你的导航条").show();
else
$("你的导航条").hide();
});  

浮动导航菜单适合购物商品种类的网址,jquery导航菜单 单页面网页内容很多,页面长度非常大,要求有利高效的在页面包车型地铁两样职分张开...

jquery怎调整当前页的领航菜单效率?

比方说导航的div <div class="nav"><a href="index.html">首页</a><a href="product.html">产品</a><a href="case.html">案例宗旨</a></div>

下面的html内容:
<div class="main">
<div class="content">首页的始末</div>
<div class="content">产品的原委</div>
<div class="content">案例宗旨的开始和结果</div>
</div>
至于class=“content”能够是您本身加上的为了便利jQuery获取,未有那么些样式类
<script type="text/javascript">
$(document).ready(function()
{
var tabs = $('.nav > a');
var cons = $('.main > div.content');

tabs.first().addClass("now").show(); //暗中认可第八个呈现
cons.first().show().nextAll().hide(); //私下认可第一个展现,其余遮掩
tabs.each(function(index){
$(this).mouseover(function(){
$(this).addClass("now").siblings().removeClass("now");
cons.eq(index).show().siblings().hide();
});
});

});
</script>  

浮动导航菜单(购物网址商品档案的次序),jquery导航菜单 单页面网页内容相当多,页面长度十分的大,需求有利高效的在页面包车型地铁分歧地方张开定...

这种菜单功效分为两局地:

澳门新萄京 12

1、点击菜单项,网页滚动到对应地点,可总结通过锚点实现;

澳门新萄京 13

2、滚动页面包车型客车时候,菜单项的当选状态要随之变动,那就要求监听网页的滚动事件并经过有个别测算来贯彻了;

实现: 
其一的页面布局很简短,大家下去多试试就OK了,值得注意的是亟需在菜单布局里的每二个li里面加多a标签何况给a标签的 href 赋上相应的id号,能够让其点击立刻跳到id对应的剧情 

澳门新萄京 14

接下来正是jquery是何许落到实处的: 

测算 scrollTop 和 种种 div 的 offsetTop 的深浅关系,判定今后网页展现的职务在如何地方,再依照计算的结果给相应的菜单项加多样式。举例第3个div 的 offset().top = 300, 第八个 div 的offset().top = 600,此时的 scrollTop = 400,表明现行反革命显示的大部是第3个 div 的职位,700 则是第几个div。下边是四个简约的例证:

1.大家须要运用$(document).scrollTop()获取滚动条相对最上部的冲天

复制代码 代码如下:

 2.通过$('#content').find('.item')[index].offset().top获取每一块内容相对最上端的冲天(笔者是在id为content的div里富含了5个class为item的div,每一种item对应二个板块的剧情) 

<div id="menu">
    <ul>
        <li><a href="#item1" class="current">1F 男装</a></li>
        <li><a href="#item2">2F 女装</a></li>
        <li><a href="#item3">3F 美妆</a></li>
        <li><a href="#item4">4F 数码</a></li>
        <li><a href="#item5">5F 母婴</a></li>
    </ul>
</div>
<div id="content">
    <h1>网购</h1>

3.然后相比每三个板块的$(document).scrollTop()是或不是高于$('#content').find('.item')[index].offset().top,若超过表达页面已经过来了对应板块。 

    <div id="item1" class="item">
        <h2>1F 男装</h2>
        <ul>
            <li><a href="#"><img src="" alt=""/></a></li>
            <!-- 若干个li -->
        </ul>
    </div>
    <!-- 若干个item-->
</div>

4.结尾经过removeClass移除此前的高亮,给对应项加多addClass扩展高亮 

复制代码 代码如下:

代码: 

     * {margin: 0;padding: 0;}
        body {font-size: 12px;line-height: 1.7;}
        li {list-style: none;}
        #content {width: 800px;margin: 0 auto;padding: 20px;}
        #content h1 {color: #0088bb;}
        #content .item {padding: 20px;margin-bottom: 20px;border: 1px dotted #0088bb;}
        #content .item h2 {font-size: 16px;font-weight: bold;border-bottom: 2px solid #0088bb;margin-bottom: 10px;}
        #content .item li {display: inline;margin-right: 10px;}
        #content .item li a img {width: 230px;height: 230px;border: none;}
        #澳门新萄京:jquery实现网页定位导航,jquery导航菜单。menu{position:fixed;left:50%;margin-left:400px;top:100px;}
        #menu ul li a {
            display: block;
            margin: 5px 0;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            width: 80px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            text-align: center;
        }
        #menu ul li a:hover,#menu ul li a.current {color: #fff;background: #0088bb;} 

上边是本身写的切实的demo,供大家参谋:
 index.html 

复制代码 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>网页定位导航</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="menu">
 <ul>
  <li><a href="#item1" class="current">1F 男装</a></li>
  <li><a href="#item2">2F 女装</a></li>
  <li><a href="#item3">3F 美妆</a></li>
  <li><a href="#item4">4F 数码</a></li>
  <li><a href="#item5">5F 生活</a></li>
 </ul>
 </div>
 <div id="content">
 <h1>XX购物网</h1>
 <div id="item1" class="item">
  <h2>1F 男装</h2>
  <ul>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  <li><a href=""><img src="images/1.jpg"></a></li>
  </ul>
 </div>
 <div id="item2" class="item">
  <h2>2F 女装</h2>
  <ul>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  <li><a href=""><img src="images/2.jpg"></a></li>
  </ul>
 </div>
 <div id="item3" class="item">
  <h2>3F 美妆</h2>
  <ul>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  <li><a href=""><img src="images/3.jpg"></a></li>
  </ul>
 </div>
 <div id="item4" class="item">
  <h2>4F 数码</h2>
  <ul>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  <li><a href=""><img src="images/4.jpg"></a></li>
  </ul>
 </div>
 <div id="item5" class="item">
  <h2>5F 生活</h2>
  <ul>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  <li><a href=""><img src="images/5.jpg"></a></li>
  </ul>
 </div>
 </div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
 style.css


*{
 margin: 0;
 padding: 0;
}

body{
 font-size: 12px;
 line-height: 1.7;
}

li{
 list-style: none;
}

#content{
 width: 800px;
 margin: 0 auto;
 padding: 20px;
}

#content h1{
 color: #0088bb;
}

#content .item{
 padding: 20px;
 margin-bottom: 20px;
 border: 1px dotted #0088bb;
}

#content .item h2{
 font-size: 16px;
 font-weight: bold;
 border-bottom: 2px solid #0088bb;
 margin-bottom: 10px;
}

#content .item ul{
 width: 740px;
 margin: 0 auto;
}

#content .item li{
 display: inline;
 margin-right: 10px;
}

#content .item li a img{
 width: 230px;
 height: 230px;
 border: none;
}

#menu{
 position: fixed;/*固定定位*/
 top: 100px;
 left: 50%;
 margin-left: 400px;
 width: 80px;
}

#menu ul li a{
 display: block;
 margin: 5px 0;
 font-size: 14px;
 font-weight: bold;
 color: #333;
 width: 80px;
 height: 50px;
 line-height: 50px;
 text-decoration: none;/*去掉超链接的下划线*/
 text-align: center;
}

#menu ul li a:hover,
#menu ul li a.current{
 color: #fff;
 background: #0088bb;
}

/*ie6 hack 兼容ie的设置*/
* html, * html body {
  background-image: url(about:blank);
  background-attachment: fixed;
}

* html #menu {
  /*position: fixed;*/
  position: absolute;
  top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop) 100 'px');
}
 script.js


$(document).ready(function () {
 //监听滚动条
 $(window).scroll(function () {
 //获取滚动条到顶部的距离
 var top = $(document).scrollTop();
 var menu = $('#menu');
 var items = $('#content').find('.item');
 var currentId = "";//当前所在的楼层是(item) id
 items.each(function(){
  var s = $(this);
  //获取item到顶部的距离 即各个楼层到顶部的距离
  var itemTop = s.offset().top;
  //判断滚动条到顶部的距离是否大于item到顶部的距离,大于则说明当前页面已经显示到了当前item即楼层
  if(top > itemTop-200){
  //取到当前楼层
  currentId = "#"   s.attr("id");
  }else{
  return false;
  } 
 });
 //给相应楼层的a设置current,取消其他链接的current
 var currentLink = menu.find(".current");
 //判断currentId是否有值,当前有current的item是否等于要添加current的item,有就不必改变,没有就更改item的current,current是显示高亮的css类
 if(currentId && currentLink.attr("href") != currentId ){
  //移除有高亮的
  currentLink.removeClass('current');
  //添加当前页面显示楼层对应的菜单选项的高亮
  menu.find("[href="   currentId  "]").addClass('current');
 }
 });
});

    $(function(){
           $(window).scroll(function(){
               var scrollTop = $(document).scrollTop();
               var contentItems = $("#澳门新萄京:jquery实现网页定位导航,jquery导航菜单。content").find(".item");
               var currentItem = "";
               contentItems.each(function(){
                   var contentItem = $(this);
                   var offsetTop = contentItem.offset().top;
                   if(scrollTop > offsetTop-200){//此处的200视具体情状自行设定,因为一旦不减去一个数值,在刚刚滚动到贰个div的边缘时,菜单的当选状态会出错,比如,页面刚好滚动到第三个div的底层的时候,页面已经呈现出第三个div,而菜单中照旧第三个挑选处于选中状态
                       currentItem = "#" contentItem.attr("id");
                   }                  
               });
               if(currentItem&¤tItem!=$("#menu").find(".current").attr("href")){
                   $("#menu").find(".current").removeClass("current");
                   $("#menu").find("[href=" currentItem "]").addClass("current");
               }
           });
       });

如上便是本文的全体内容,希望对大家的上学抱有支持,也可望我们多多援救脚本之家。

你或然感兴趣的小说:

  • jquery插件制作 手风琴Panel效果实现
  • 依据jquery的slideDown和slideUp做手风琴
  • jQuery制作效果超棒的手风琴折叠菜单
  • jquery手风琴特效插件
  • jquery达成手风琴效果实例代码
  • 全面选料的12款不错的依赖jQuery的手风琴效果插件和课程
  • 依照Jquery代码完毕手风琴菜单
  • jQuery完结卡通气球弹出框式的右边导航菜单作用
  • 依照jQuery倾斜张开侧面栏菜单特效代码
  • jQuery落成的手风琴左侧菜单成效

您大概感兴趣的稿子:

  • 故事jQuery实现定位导航地点效果
  • jQuery导航条固定定位效率实例代码
  • 依据JQuery和原生JavaScript实现网页定位导航特效
  • jQuery网页定位导航特效完毕格局
  • jQuery仿京东市廛楼梯式导航定位菜单
  • jquery实现集团定位式导航功效

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:澳门新萄京:jquery实现网页定位导航,jquery导航

上一篇:模块化详解及实例代码,js使用Angular简单示例 下一篇:没有了
猜你喜欢
热门排行
精彩图文