js实现网页定位导航功能

2024-10-10 15:46:27

本文实例为大家分享了js网页定位导航的具体代码，供大家参考，具体内容如下

一个循环判断当前滚动到的位置，另一个循环遍历导航条判断其id是否与滚动到的位置相同

效果如图：

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>地狗购物网--网页定位导航效果</title>
  <style type="text/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: 12px;
      font-weight: bold;
      border-bottom: 2px solid #0088bb;
      margin-bottom: 10px;
    }
    #content .item li{
      display: inline;
      margin-left: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-align: center;
      text-decoration: none;
    }
    #menu ul li a:hover{
      color: #fff;
      background: #0088bb;
    }
    #menu ul li .current{
      color: #fff;
      background: #0088bb;
    }
  </style>
  <script type="text/javascript">
    window.onload = function(){
      window.onscroll=function(){
        var top = document.documentElement.scrollTop || document.body.scrollTop;
        var menus = document.getElementById("menu").getElementsByTagName("a");
        var items=document.getElementById("content").getElementsByClassName("item");

        var currentId="";
        for(var i=0;i<items.length;i++){
          var _item=items[i];
          var _itemTop = _item.offsetTop;
          if(top>_itemTop - 200){
            currentId=_item.id;
          }else{
            break;
          }
        }
        if(currentId!=""){
          //给正确的menu下的a元素class赋值
          for(var j=0;j<menus.length;j++){
            var _menu=menus[j];
            var _href=_menu.href.split("#");//因为只通过href获取的链接为一长串链接，需要通过#分成数组
            if(_href[_href.length-1]!=currentId){
              _menu.className = "";
            }else{
              _menu.className = " current";
            }
          }
        }
      }
    }
  </script>
</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>地狗购物网</h1>
  <div id="item1" class="item">
    <h2>1F 男装</h2>
    <ul>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/1F.jpg" alt=""/></a></li>
    </ul>
  </div>
  <div id="item2" class="item">
    <h2>2F 女装</h2>
    <ul>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/2F.jpg" alt=""/></a></li>
    </ul>
  </div>
  <div id="item3" class="item">
    <h2>3F 美妆</h2>
    <ul>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/3F.jpg" alt=""/></a></li>
    </ul>
  </div>
  <div id="item4" class="item">
    <h2>4F 数码</h2>
    <ul>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
      <li><a href="#"><img src="img/4F.png" alt=""/></a></li>
    </ul>
  </div>
  <div id="item5" class="item">
    <h2>5F 母婴</h2>
    <ul>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
      <li><a href="#"><img src="img/5F.jpg" alt=""/></a></li>
    </ul>
  </div>
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于JQuery和原生JavaScript实现网页定位导航特效

慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>爱淘气购物网-JQuery网页定位导航特效</title> <style> /*All tag*/ html, body, div, ul, li, img
Javascript实现页面滚动时导航智能定位

常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域. 假设结构如下: <div class="container"> <div class="wrapper"> <div class="section" id="section1">section1</div> <di
Fullpage.js固定导航栏-实现定位导航栏

FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和移动设备. 开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的. 一.准备工
js实现网页定位导航功能

本文实例为大家分享了js网页定位导航的具体代码,供大家参考,具体内容如下一个循环判断当前滚动到的位置,另一个循环遍历导航条判断其id是否与滚动到的位置相同效果如图: 实现代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>地狗购物网--网页定位导航效果</title> <style type
jquery实现网页定位导航

不知道大家有没有注意到有的网页由于页面信息量太大所以使用了页面定位导航来实现跳转,点击旁边的菜单的某一项页面就跳到那一项对应的内容,而且我们滚动滚动条,当滚动到某一项内容,旁边菜单对应的那一项也会高亮显示.今天我就来讲讲这样的效果是如何实现的. 先贴上显示效果: 实现: 这个的页面布局很简单,大家下去多试试就OK了,值得注意的是需要在菜单布局里的每一个li里面添加a标签并且给a标签的 href 赋上对应的id号,可以让其点击立即跳到id对应的内容然后就是jquery是如何实现的: 1.我们需
js控制网页背景音乐播放与停止的方法

本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
js给网页加上背景音乐及选择音效的方法

本文实例讲述了js给网页加上背景音乐及选择音效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <HTML> <HEAD> <TITLE>给网页加上背景音乐,选择音效功能</TITLE> <STYLE>  a{font-size:30pt;color:blue;font-family:Vineta BT} a:link{text-decoration:none;} a:hover{text-
jQuery网页定位导航特效实现方法

本文实例讲述了jQuery网页定位导航特效实现方法.分享给大家供大家参考,具体如下: 描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离(相对于顶部),如果滚动距离大于等于楼层距离,即进入了相应楼层,然后通过一个变量来记录该楼层的信息,最后传递给右边高亮显示 1.点击右边固定导航项时,左边的内容跟着切换. 只需将右边a的href设置为左边区块的id加
JS实现网页上随机产生超链接地址的方法

本文实例讲述了JS实现网页上随机产生超链接地址的方法.分享给大家供大家参考,具体如下: 这是一个JavaScript的应用,每刷新一次页面,会自动更换一次链接,虽然不常用,不过对Javascript随机函数Math.random() 的使用将直到引导作用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-math-rand-url-show-codes/ 具体代码如下: <html> <head> <title>在
js实现网页抽奖实例

本文实例讲述了js实现网页抽奖的方法.分享给大家供大家参考.具体如下: 这段网页抽奖程序,基于javascript代码实现,简单的演示如何使用JS来实现抽奖功能,点击"开始抽奖"按钮,程序即开始抽奖了,需要停止的时候按"停止",以前发过类似的抽奖程序有几个了,有兴趣的自己在本站网页特效栏目搜索"抽奖"看下. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html> <html lang="zh"&
利用JS做网页特效_大图轮播(实例讲解)

废话不多说,直接上代码: <style> * { margin: 0px; padding: 0px; } .stage { width: 500px; height: 300px; border: 5px solid black; margin: 200px; position: relative; overflow: hidden; } .to-left, .to-right { position: absolute; top: 0px; width: 50px; height: 300p
JS防止网页被嵌入iframe框架的方法分析

本文实例讲述了JS防止网页被嵌入iframe框架的方法.分享给大家供大家参考,具体如下: 例如: <script type="text/javascript"> if (window!=top) // 判断当前的window对象是否是top对象 top.location.href = window.location.href; // 如果不是,将top对象的网址自动导向被嵌入网页的网址 </script> 这段代码是有效的.但是,有一个问题:使用后,任何人都无法

js实现网页定位导航功能

相关推荐

随机推荐