JQuery实现带有滑动下边框的导航栏

肥牛熟了熟了

已于 2022-10-23 15:26:21 修改

阅读量965

点赞数 1

分类专栏： html 文章标签： jquery javascript 前端

于 2022-10-23 00:27:33 首次发布

本文链接：https://blog.csdn.net/LUOZONGW/article/details/127464346

版权

html 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

比亚迪海洋官网效果图如下

比亚迪汽车官方网站比亚迪汽车 ─ 新能源汽车领导者

我的效果图

官网效果为：点击导航栏的列表项，滑动下边框，并滑动到对应的图片高度；滑动到不同的高度，导航栏的下边框也滑动到相应的列表项。

我的效果为：鼠标划过导航栏的列表项出现下边框，并滑动到对应的图片高度；滑动到不同的高度，相应的列表项出现下边框。

（小小的bug：鼠标划过的下边框是一个div，改变div的宽度和位置；滚动条滑动的相应的下边框是边框border-bottom）是两个东西

先讲鼠标划过的div

css实现样式

布局层

首先制作导航栏整体，制作像下边框的div，放在导航栏的div的ul里面

 <!-- 海洋元素 -->
            <div class="home_headrd_center">
                <ul class="nav_bar_list ocean-list">
                    <li class="nav_bar_item ocean-item" index="1">
                        <div class="dImg-box">
                            <img class="ocean-item-border" src="">
                        </div>
                    </li>
                    <!-- 省略几个li-->
                    <div class="buttom_border"></div>
                </ul>
                
            </div>

  <div class="buttom_border"></div>

CSS样式

.buttom_border{
    /* 绝对定位  导航栏的div设置相对位置*/
    position: absolute;
    /* 位置与列表项位置同高 */
    bottom: 1.65rem;
    /* 起始宽度为0 */
    width:0;
   /* 高度与下边框的宽一样 */
    height: .2rem;
   /* 变化时间 */
    transition: all 0.4s;
    background-color: white;
}

JS

鼠标悬停滑动到指定位置

实现步骤：

给导航栏列表项绑定悬停事件hover() 或者用monseenter() 和 mouseleave()
给列表项设置index属性 attr()获得属性值
通过index下标得到相应图片的位置的高度 position().top scrollTop 滑动到指定高度

下边框滑动转移

实现步骤：

1. 设置每个item列表项的外边距为固定3rem
.ocean-item{
   width: auto;
   margin-right: 3rem;
}
2. 获取这个元素li的距离左边的距离，里面的图标的宽度和右边距

这个li距离ul左边的距离left+图标盒子的右外边距margin-right=下边框的位移

3. 改变宽度wdith和位移left 实现滑动效果

   //海洋导航栏 鼠标放上去滑动
    $(".ocean-item").hover(function(){
        //得到放在哪个item的下标
         let itemIndex = $(this).attr("index");
       //获取这个item里的图标宽度
       let itemWidth = $(this).find("img").width();      
       //offset() 相对于窗口 position()相对于父级   每一个item距离ul左边的距离
       let psx =$(this).position().left;
       //加上图标盒子的右外边距
       let psx2 = $(this).find(".dImg-box").css("margin-right");
       //改变宽度和位移
       $(".buttom_border").css({"width": itemWidth,"left":parseFloat(psx+psx2) });


        //滑动到相应内容
        // $(".car_item").eq(itemIndex-1).scrollTop(100);
        let scrollOffset = $(".car_item").eq(itemIndex-1).position().top +2+ 'px';
        $('body, html').animate({
              scrollTop: scrollOffset
        }, 500);

        //鼠标移开后
    },function(){
      $(".buttom_border").css("width","0");
   })

列表项的下边框

CSS样式

/* 海洋导航栏下边框 */
.ocean-item-border{
    /* 与div的高度一致 */
    border-bottom: .2rem solid white;
    /* 防止下边框出现被向上挤压 */
    box-sizing: content-box;
    /* 与div的变化时间一致 假装只有一个下边框 */
    transition: all .4s;
}

JS

监听滚动条滑动相应的导航栏加下边框

实现步骤：

        1.给窗口绑定滑动事件scroll()

        2.window.scrollY得到滚动的高度

        3.滚动的高度 % 一个图片的高度 = 图片的下标取整

4. 通过index给相应的导航栏加下边框

//海洋滑动到相应div 监听滚动条滑动
    $(window).scroll(function() {
        //得到滚动的高度
        let s = window.scrollY;
        //滚动的高度 除以 一个图片的高度 = 图片的下标 取整
        let index =parseInt( s / parseInt($(".car_item").eq(0).height()));
        //   console.log(index);
        //滑动到哪个图片 相应的导航栏加下边框
       $(".ocean-item").eq(index).find("img").addClass("ocean-item-border");
       $(".ocean-item").eq(index).siblings().find("img").removeClass("ocean-item-border");
      });

别人的实现方式：http://t.csdn.cn/x0VoP

使用别人的实现方式，只用一个div就能实现官网的效果（滑动转移和点击转移）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
        <link rel="stylesheet" href="css/wangchao.css">

        <script src="js/jquery-3.6.1.js"></script>
		<script type="text/javascript">
	
		(function ($) {
			$(function () {
				nav();
				nav2();
			});
			
			function nav() {
				//获取第一个li
				var $liCur = $(".nav-box ul li.cur")
				//获取第一个li的a标签
                var $liCurA = $(".nav-box ul li.cur a"),
				//距离左边的距离
				curP = $liCur.position().left,
				//a标签的内外宽度
				curW = $liCurA.outerWidth(true),
				//下边框
				$slider = $(".nav-line"),
				$targetEle = $(".nav-box ul li a");
				// $navBox = $(".nav-box");
				//初始化
				$slider.stop(true).animate({
					"left":curP,
					// "width":curW
                    "width":0
				});
				//绑定点击事件
				$targetEle.click(function () {
					//这个a标签的父级li
					var $_parent = $(this).parent(),
					// _width = $_parent.outerWidth(true),
                    _width = $(this).outerWidth(true),
					posL = $_parent.position().left;
					// stop 停止单个动画
					//stop(true) 停止所有动画
					//stop(true,true) 立即完成当前活动的动画，然后停下来
					$slider.stop(true).animate({
                        // 距离ul的左边距离
						"left":posL,
                         // a标签的宽度
						"width":_width
					}, "fast");

                    var index = $(this).parent().attr("index");
                    //滑动到响应位置 通过index 监听滚动条滑动位置 
                     let scrollOffset = $(".car_item").eq(index).position().top +2+ 'px';
                        $('body, html').animate({
                            scrollTop: scrollOffset
                        }, 500);
				});
				// $navBox.mouseleave(function (cur, wid) {
				// 	cur = curP;
				// 	wid = curW;
				// 	$slider.stop(true, true).animate({
				// 		"left":cur,
				// 		// "width":wid
                //         "width":0
				// 	}, "fast");
				// });
			};
		
           // 响应的导航栏列表项加下边框  
		   
			function nav2() {
           $(window).scroll(function(){
            let s = window.scrollY;
            let Imgindex =parseInt( s / parseInt($(".car_item").eq(0).height()));

           let $_item =  $(".nav-box ul li a").eq(Imgindex);
			var $_parent = $_item.parent(),
					// _width = $_parent.outerWidth(true),
                    _width = $_item.outerWidth(true),
					posL = $_parent.position().left;
					
                    $slider = $(".nav-line"),
					$slider.stop(true).animate({
                        // 距离ul的左边距离
						"left":posL,
                         // a标签的宽度
						"width":_width
					}, "fast");
           });
		};
		})(jQuery);
 
		</script>
		<style type="text/css">
			body{margin: 0; }
			ul, li{margin: 0; padding: 0;}
			a{text-decoration: none;}
	
			.banner{
				width: 100%;
				height: 70px;
				position: fixed;
                top: 0;
                z-index: 10;
				background-color: rgba(141, 141, 130, 0.45);
				}
			.nav-box{
				width: 50%;
				float: right;
				position: relative;
				top: 35px;
			/*	background-color: darkgray;*/
			}
			.nav-box ul{
				list-style: none;
						
			}
			.nav-box ul li{
				float: left;
				font-size: 14px;
				font-family: "微软雅黑";
				
				height: 30px;
				line-height: 30px;
                margin-right: 30px;
				/* padding: 0 12px; */
			/*	background-color: #F5F5F5;*/
			}
            .nav-box ul li a{
                color: white;
            }
			.nav-box .nav-line {
			    background: none repeat scroll 0 0 white;
			    bottom: 0;
			    font-size: 0;
			    height: 2px;
			    left: 0;
			    line-height: 2px;
			    position: absolute;
			    width: 52px;
			}	
			
		</style>
	</head>
	<body>
		<div class="banner" >
			<div class="nav-box">
				<ul>
					<li class="cur" index="0"><a href="#">首页</a></li>
					<li index="1"><a href="#">论坛</a></li>
					<li index="2"><a href="#">商务合作</a></li>
					<li index="3"><a href="#">下载专区</a></li>
					<li index="4"><a href="#">关于我们</a></li>
				</ul>
				<div class="nav-line" ></div>
			</div>
 
		</div>
 
              <!-- 车辆大图列表 -->
          <div class="car_list_box">
            <div class="car_item"  index="1">
              <img src="./images/oceanCar (1).png" class="car_bg_img" alt="">
             
            </div>
            <div class="car_item"  index="2">
              <img src="./images/oceanCar (2).png" class="car_bg_img" alt="">
              
            </div>
            <div class="car_item"  index="3">
              <img src="./images/oceanCar (3).png" class="car_bg_img" alt="">
              
            </div>
            <div class="car_item"  index="4">
              <img src="./images/oceanCar (4).png" class="car_bg_img" alt="">
              
            </div>
            <div class="car_item"  index="5">
              <img src="./images/oceanCar (5).png" class="car_bg_img" alt="" style="margin-top: 20px;">
              
            </div>
           
          </div>
	</body>
</html>

stop 停止单个动画
stop(true) 停止所有动画

stop(true,true) 立即完成当前活动的动画，然后停下来

使用stop(true,true) 会与其他动画冲突，导致卡顿。

其他的实现方式：伪类（伪元素：创建新的元素）

编写页面出现的问题：width为100%时，缩小浏览器，导航栏的东西会被挤压下去。解决方法：1.设置固定宽度