用jquery制作导航定位特效

最新推荐文章于 2023-03-07 09:29:45 发布
原创 最新推荐文章于 2023-03-07 09:29:45 发布 · 702 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#导航 定位 jquery

本文介绍了一个使用HTML、CSS和JavaScript实现的滚动导航特效案例。该特效能够随着页面滚动自动更新当前楼层链接的状态，适用于多楼层展示的网页布局。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航定位特效</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            line-height: 1.7;
            font-size:12px;
        }
        li{
            list-style-type:none;
        }
    #content{
        width: 800px;
        margin:0 auto;
        padding:20px;
}
        #content h1{
            color: #0088bb;

        }
        .item{
            padding:20px;
            margin-bottom:20px;
            border:1px solid #0088bb;
     }
        .item h2{
            font-size:16px;
            border-bottom:1px solid #0088bb;
            padding-bottom:10px;
        }
        .item li{
            display: inline;
            margin-right:10px;
        }
        .item li a img{
            width:230px;
            height:230px;
            border:0;
        }
        #menu{
            position: fixed;
            top:100px;
            left:50%;
            margin-left:400px;
        }
        #menu li a{
            display: block;
            text-decoration: none;
            font-size:14px;
            width:80px;
            height:50px;
            line-height:50px;
            color: #333;
            margin:5px 0;
            text-align: center;
        }
        #menu li a:hover,.current{
            background: #0088bb;
            color:white;
        }

    </style>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
        <script type="text/javascript">
        $(function(){
            $(window).scroll(function(){
                var menu=$("#menu");
                var top =$(document).scrollTop();
                var items=$("#content").find(".item");
                var currentId="";
                items.each(function(){
                    var m =$(this);
                    if(top> m.offset().top){
                        currentId="#"+ m.attr("id")
                    }else{
                        return false
                    }
                });
                var currentLink=menu.find(".current")
                if(currentId && currentLink!=currentId){
                    menu.find(".current").removeClass("current")
                    menu.find("[href=" + currentId + "]").addClass("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="1F.jpg"></a></li>
            <li><a href="#"><img src="1F.jpg"></a></li>
            <li><a href="#"><img src="1F.jpg"></a></li>
            <li><a href="#"><img src="1F.jpg"></a></li>
            <li><a href="#"><img src="1F.jpg"></a></li>
            <li><a href="#"><img src="1F.jpg"></a></li>
            <li><a href="#"><img src="1F.jpg"></a></li>
            <li><a href="#"><img src="1F.jpg"></a></li>
            <li><a href="#"><img src="1F.jpg"></a></li>
        </ul>
    </div>
    <div id="item2" class="item">
        <h2>2F 女装</h2>
        <ul>
            <li><a href="#"><img src="2F.jpg"></a></li>
            <li><a href="#"><img src="2F.jpg"></a></li>
            <li><a href="#"><img src="2F.jpg"></a></li>
            <li><a href="#"><img src="2F.jpg"></a></li>
            <li><a href="#"><img src="2F.jpg"></a></li>
            <li><a href="#"><img src="2F.jpg"></a></li>
            <li><a href="#"><img src="2F.jpg"></a></li>
            <li><a href="#"><img src="2F.jpg"></a></li>
            <li><a href="#"><img src="2F.jpg"></a></li>
        </ul>
    </div>
    <div id="item3" class="item">
        <h2>3F 美妆</h2>
        <ul>
            <li><a href="#"><img src="3F.jpg"></a></li>
            <li><a href="#"><img src="3F.jpg"></a></li>
            <li><a href="#"><img src="3F.jpg"></a></li>
            <li><a href="#"><img src="3F.jpg"></a></li>
            <li><a href="#"><img src="3F.jpg"></a></li>
            <li><a href="#"><img src="3F.jpg"></a></li>
            <li><a href="#"><img src="3F.jpg"></a></li>
            <li><a href="#"><img src="3F.jpg"></a></li>
            <li><a href="#"><img src="3F.jpg"></a></li>
        </ul>
    </div>
    <div id="item4" class="item">
        <h2>4F 数码</h2>
        <ul>
            <li><a href="#"><img src="4F.png"></a></li>
            <li><a href="#"><img src="4F.png"></a></li>
            <li><a href="#"><img src="4F.png"></a></li>
            <li><a href="#"><img src="4F.png"></a></li>
            <li><a href="#"><img src="4F.png"></a></li>
            <li><a href="#"><img src="4F.png"></a></li>
            <li><a href="#"><img src="4F.png"></a></li>
            <li><a href="#"><img src="4F.png"></a></li>
            <li><a href="#"><img src="4F.png"></a></li>
        </ul>
    </div>
    <div id="item5" class="item">
        <h2>5F 童装</h2>
        <ul>
            <li><a href="#"><img src="5F.jpg"></a></li>
            <li><a href="#"><img src="5F.jpg"></a></li>
            <li><a href="#"><img src="5F.jpg"></a></li>
            <li><a href="#"><img src="5F.jpg"></a></li>
            <li><a href="#"><img src="5F.jpg"></a></li>
            <li><a href="#"><img src="5F.jpg"></a></li>
            <li><a href="#"><img src="5F.jpg"></a></li>
            <li><a href="#"><img src="5F.jpg"></a></li>
            <li><a href="#"><img src="5F.jpg"></a></li>
        </ul>
    </div>
</div>
</body>
</html>
Jquery左侧导航栏酷炫效果
01-04
左侧导航栏酷炫效果，默认为隐藏，点击后，页面变色，导航栏显现。适合初学者学习。HTML方式
jquery左侧导航滑动网页定位效果特效代码
03-20
【jQuery左侧导航滑动网页定位效果特效代码详解】 在网页设计中，左侧导航栏是一种常见的布局方式，尤其在内容丰富的网站中，它可以帮助用户快速浏览和定位页面内容。本篇文章将详细讲解如何利用jQuery实现一个功能...
jquery第三章练习一（左导航特效）
weixin_47065927的博客
08-19 3200
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>导航特效</title> <style type="text/css"> * { margin: 0px; padding: 0px; font-size: 12px; }
导航特效
weixin_34255793的博客
02-04 118
<!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"> <hea...
JQuery制作简单的网页导航特效
weixin_30566111的博客
04-05 1080
使用JQuery中hover()方法，使其根据鼠标的移动简单的改变背景颜色; hover();用于模拟鼠标指针悬停事件，当鼠标指针移动到元素上时，会触发指定的第一个函数，当鼠标指针移除这个元素时，会触发第二个函数；类似于mouseover和mouseout组合具体的代码如下： html代码： <div class="nav"> <ul> ...
使用jQuery做网页定位导航特效（下）
WJM_Aunt
09-16 754
网页定位导航特效（下） 一、特效分析 左侧是内容，右侧是悬浮的导航菜单，左侧滚动时，右侧内容不改变位置；点击右侧链接，左侧定位到相应栏目，左侧滚动到相应栏目，右侧定位到对应链接。 重难点： 左侧栏目和右侧导航菜单的显示样式实现 导航与滚动条之间的定位关联 二、特效设计 技术点： 锚点（anchor）—网页制作中超链接的一种，页面内的超级链接 关于滚动条定位的事件和方法
jQuery制作下划线导航栏动画特效
07-31
而使用jQuery制作下划线导航栏动画特效可以提升用户体验，使交互更具吸引力。本篇文章将详细解析如何使用jQuery实现这种效果。 首先，我们需要理解jQuery的基本概念。jQuery是一个轻量级的JavaScript库，它简化了...
jQuery制作顶部浮动导航菜单定位特效加选中当前栏目
11-02
本文将深入探讨如何使用jQuery技术来创建一个具有浮动效果和锚点导航功能的顶部菜单，并实现当页面滚动到特定内容区域时，菜单中的相应链接自动获得选中状态，提供更友好的用户体验。 首先，我们需要理解锚点导航的...
jQuery右侧固定层导航锚点定位特效代码
03-20
【jQuery右侧固定层导航锚点定位特效代码】是一种在网页设计中常见的交互功能，它能够提升用户体验，使得用户在浏览长页面时能更方便地访问各个内容区块。这个特效主要利用了JavaScript库jQuery来实现，尤其适用于...
jQuery导航效果特效代码
03-20
jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 DOM 操作、事件处理、动画制作以及 AJAX 请求等任务，因此在创建动态和交互性极强的导航效果时，jQuery 成为了首选工具。"jQuery 导航效果特效代码"就是利用...
jquery特效制作左侧侧边浮动导航菜单滑动显示或隐藏
09-17
17素材的资源，下载还要积分，专门扒下来的，jquery 后台左侧点击折叠关闭功能，不是折叠菜单哦
Jquery实现超酷的左边商品分类导航菜单特效.zip
07-04
Jquery实现超酷的左边商品分类导航菜单特效
jquery左侧导航滑动网页定位效果.
05-26
jquery左侧导航滑动网页定位效果，点击菜单到相应位置
jQuery网页左侧分类导航菜单特效代码
03-20
jQuery网页左侧分类导航菜单基于jquery.1.10.2.min.js制作，鼠标经过一级分类菜单，显示详细二级分类菜单，适用于教育课程、购物商城等产品分类较多的站点。
jQuery后台管理系统可折叠左侧导航菜单特效
06-05
jQuery后台管理系统可折叠左侧导航菜单特效，这也是一款响应式网站后台管理界面UI框架模板。
用JQuery写菜单导航
qq_45746493的博客
10-24 451
效果 用scc写出页面的样式 <style> .nav{ width:900px; height:36px; position:relative; background-color: blue; text-align:center; line-height:36px; font-size:12px; color: black; ...
使用jQuery制作左侧导航栏，并用ES6 Class封装起来
shiyutim
08-31 815
使用jquery制作左侧导航，并用ES6的class封装 首先是html结构： <ul class="left-nav"> <li> <a href="javascript:;" class="nav-pic1">导航一 <img class="iconfont" src="jiantouxiangxia.png" alt=""&g...
jQuery导航条的效果（左侧菜单）
行者
12-28 915
标题1  标题2  标题3  标题4  标题5  标题6    进入之后才能看到效果！    $(document).ready(function () {  myHide();  });  function myHide() {  //alert("hello");  //注册事件  $(".m1").bind('mouseover', m1_mouseover);
使用jq实现左侧导航条
weixin_48240707的博客
03-07 804
使用jq实现左侧导航条
响应式导航：jQuery制作的粘性滑块特效
在本特效中，jQuery用于处理点击导航标签时的事件绑定、页面内容的滑动定位以及响应式设计的兼容性调整等。 2. CSS3的响应式布局 CSS3提供了丰富的布局和样式控制功能，是实现响应式设计的关键技术之一。在这款导航...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值