比亚迪海洋官网效果图如下
比亚迪汽车官方网站 比亚迪汽车 ─ 新能源汽车领导者
我的效果图
官网效果为：点击导航栏的列表项，滑动下边框，并滑动到对应的图片高度；滑动到不同的高度，导航栏的下边框也滑动到相应的列表项。
我的效果为：鼠标划过导航栏的列表项出现下边框，并滑动到对应的图片高度；滑动到不同的高度，相应的列表项出现下边框。
（小小的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.设置固定宽度
