vue鼠标滚动切换页面导航栏点击切换页面悬浮小圆点切换页面默认选中第一项滚动还是点击都会选中停留所在页面

走马灯效果 鼠标轮播切换网页

  • screenWeight
  • swiper 移动端鼠标轮播

screenWeight

类似走马灯的切换页面 代码基本上基于下链接的博主 自己增加了一点点小内容
https://blog.csdn.net/Lccccb/article/details/104671115
继续赶项目了…有问题评论或私信 有机会再改善一下
shift+alt+f 代码格式化 排版更整齐
红色拖影是hover属性 点击才有 一开始没有是因为两种情况 一、鼠标滚动切换网页 二、点击顶部导航栏
颜色改变顶部和dot导航栏一致 对应导航所在位置有对应颜色 vue鼠标滚动切换页面导航栏点击切换页面悬浮小圆点切换页面默认选中第一项滚动还是点击都会选中停留所在页面_第1张图片


 


style.css

#app {
    font-size: 0;
    width: 100%;
}

.nav {
    width: 100%;
    height: 50px;
    background-color: #0A0F24;
    display: inline-flex;
    flex-direction: row;
    position: fixed;
    top: 0;
}

.nav a {
    color: white;
}

.router-link-active {
    text-decoration: none;
}

.citySeven {
    display: inline-block;
    width: 50%;
    height: 50px;
    background: url('./img/logo.png')10px no-repeat;
    background-size: 50% 33px;
}

.citySeven_nav {
    width: 35%;
    height: 50px;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-size: 10px;
    white-space: nowrap;
    font-weight: lighter;
}

.citySeven_nav li {
    color: white;
}

.dot_nav {
    position: fixed;
    right: 10px;
    top: 200px;
    width: 30px;
    height: 50%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: beige;
    margin-bottom: 5px !important;
    display: block;
}

.dot:hover {
    background-color: tomato;
}

前方代码丑的有点惨烈 但是通俗易懂 重构后 如下





swiper 移动端鼠标轮播

vue鼠标滚动切换页面导航栏点击切换页面悬浮小圆点切换页面默认选中第一项滚动还是点击都会选中停留所在页面_第2张图片




 

你可能感兴趣的:(vue.js,css)