首页 > 编程语言 >JavaScript水平滚动菜单切换

JavaScript水平滚动菜单切换

时间：2022-10-06 02:44:27浏览次数：46  
标签：flex style 菜单 滚动 center JavaScript btnScrollLeft border scroll

 

 

 

 

 

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
    height: 100vh;
}

.horizontal-scroll{
    width: 600px;
    height: 80px;
    background-color: #fff;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}



.horizontal-scroll .btn-scroll{
    background-color: #fff;
    color: #999;
    padding: 5px 8px;
    box-shadow: 0 0 10px #999;
    border: 0;
    border-radius: 50%;
    margin: 0 5px;
    z-index: 1;
    cursor: pointer;
    transition: 1s;
}

.storys-container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    left: 0;
    transition: 0.5s all ease-out;
}
.story-circle{
    background:linear-gradient(rgb(231,0,231),rgb(255,155,0));
    width: 60px;
    height: 60px;
    margin: 15px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transform: rotateZ(45deg);
}

.story-circle img{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #fff;
    transform: rotateZ(-45deg);
}
    </style>
</head>
<body>
    <div class="container">
        <div class="horizontal-scroll">
            <button class="btn-scroll" id="btn-scroll-left" onclick="scrollHorizontally(1)"><i class="fas fa-chevron-left"></i></button>
            <button class="btn-scroll" id="btn-scroll-right" onclick="scrollHorizontally(-1)"><i class="fas fa-chevron-right"></i></button>
            <div class="storys-container">
                <div class="story-circle" onclick="indexScroll(1)"><img src="https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(2)"><img src="https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(3)"><img src="https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(4)"><img src="https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(5)"><img src="https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(6)"><img src="https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(7)"><img src="https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(8)"><img src="https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(9)"><img src="https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(10)"><img src="https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(11)"><img src="https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(12)"><img src="https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(13)"><img src="https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(14)"><img src="https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(15)"><img src="https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(16)"><img src="https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(17)"><img src="https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(18)"><img src="https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(19)"><img src="https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(20)"><img src="https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(21)"><img src="https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(22)"><img src="https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(23)"><img src="https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500" alt=""></div>
                <div class="story-circle" onclick="indexScroll(24)"><img src="https://img2.baidu.com/it/u=631618391,2322805080&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
            </div>
        </div>
    </div>
    <script>
        let currentScrollPoition = 0;
        let scrollAmount =320;

        const sCont = document.querySelector(".storys-container");
        const hScroll = document.querySelector(".horizontal-scroll");

        const btnScrollLeft=document.querySelector("#btn-scroll-left");
        const btnScrollRight=document.querySelector("#btn-scroll-right");
        btnScrollLeft.style.opacity="0";



        let maxScroll = -sCont.offsetWidth+hScroll.offsetWidth;
        console.log(-sCont.offsetWidth);
        console.log(hScroll.offsetWidth);
        console.log(maxScroll);


        let scrollIndex=80;
        let numberIndex=0;


        function indexScroll(index){
            console.log(index);
            console.log(numberIndex);
            if(index>numberIndex){
                currentScrollPoition=((-index+2)*scrollIndex);
            }

            if(index<numberIndex){
                currentScrollPoition=((-index+1)*scrollIndex)+scrollIndex;
            }


            if(currentScrollPoition>0){
                currentScrollPoition=0;
                btnScrollLeft.style.opacity="0";
            }else{
                btnScrollLeft.style.opacity="1";
            }

            if(currentScrollPoition<maxScroll){
                currentScrollPoition=maxScroll;
                btnScrollRight.style.opacity="0";
            }else{
                btnScrollRight.style.opacity="1";
            }

            numberIndex=index;


            // if(currentScrollPoition<maxScroll){
            //     currentScrollPoition=maxScroll;
            //     btnScrollRight.style.opacity="0";
            // }else{
            //     btnScrollRight.style.opacity="1";
            // }
            sCont.style.left=currentScrollPoition+"px";
        }

        function scrollHorizontally(val){
            currentScrollPoition +=(val*scrollAmount);
            if(currentScrollPoition>0){
                currentScrollPoition=0;
                btnScrollLeft.style.opacity="0";
            }else{
                btnScrollLeft.style.opacity="1";
            }

            if(currentScrollPoition<maxScroll){
                currentScrollPoition=maxScroll;
                btnScrollRight.style.opacity="0";
            }else{
                btnScrollRight.style.opacity="1";
            }
            sCont.style.left=currentScrollPoition+"px";

        }

    </script>


  <!-- 模仿他额 -->
  <!-- https://sale.alibaba.com/p/ddq85y4cc/index.html?wx_screen_direc=portrait&wx_navbar_transparent=true&path=/p/dz6ct35fq/index.html&ncms_spm=a27aq.21982270a27aq&prefetchKey=met?spm=a27aq.13929364.dt_1.4.7c63f5889SKVlw&topOfferIds=1600295878800&categoryIds=431401&cardType=1448002&cardId=1674203&themeTraceLog=ncchanneltheme-564_ncchannel-92$ncchanneltheme-564_ncchannel-92 -->
</body>
</html>

 

标签：flex,style,菜单,滚动,center,JavaScript,btnScrollLeft,border,scroll
From： https://www.cnblogs.com/hechunfeng/p/16756932.html

相关文章

  • day09 --> 【JavaScript（BOM、DOM事件）】
    DOM简单学习：为了满足案例要求功能：控制HTML文档的内容代码：获取页面标签（/亦叫元素）对象Elementdocument.getElementById("id值");通过元素的id值获取元素对象操作Elemen......
  • 10 个超棒的 JavaScript 简写技巧
    今天我要分享的是10个超棒的JavaScript简写方法，可以加快开发速度，让你的开发工作事半功倍哦。开始吧！1.合并数组普通写法：我们通常使用Array中的concat()方法合并两个数组......
  • 常用的前端JavaScript方法封装
    [常用的前端JavaScript方法封装]1、输入一个值，返回其数据类型functiontype(para){returnObject.prototype.toString.call(para)}复制代码2、数组去重functio......
  • vue（8）v-model与JavaScript中array对象的配合使用
    序实现了之前代码的删除功能，并加入了对于复选框的全选，全不选，反选等功能示例代码展开查看<!DOCTYPEhtml><html> <head> <meta......
  • JavaScript中的Promise详解
    我们了解Promise之前先了解一下什么是异步，因为Promise是用来处理异步操作的一、什么是异步异步（Asynchronous,async）是与同步（Synchronous,sync）相对的概念。总所周知，Jav......
  • 手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内
    前端的那些基本标签​​......
  • 经常会采坑的javascript原型应试题
    一．前言原型和原型链在面试中历来备受重视，经常被提及。说难可能也不太难，但要真正完全理解，吃透它，还是要多下功夫的。下面为大家简单阐述我对原型和原型链的理解，若是觉得有......
  • Python 注册菜单
    我们看到下面的示例图是在右键文件夹上查看菜单，带有两级的菜单选项。需要使用管理员权限运行因为右键菜单需要注册表信息，打开注册表需要管理员权限UAC，所以在执行命令过......
  • CSS3自定义滚动条样式 -webkit-scrollbar
    移动端隐藏scroll滚动条::-webkit-scrollbar ::-webkit-scrollbar{/*隐藏滚轮*/display:none;}CSS3自定义滚动条样式-webkit-scrollbar 前言webkit支持拥有overflow属......
  • 01.JavaScript简介
    JavaScript(JS)isalightweight,interpreted,orjust-in-timecompiledprogramminglanguagewithfirst-classfunctions.Whileitismostwell-knownasthe......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99