移动端滑动点击导航栏首页（使用swiper，anime，layui）

最新推荐文章于 2024-07-23 22:27:37 发布

智者不坠入爱河，年轻人不讲武德

最新推荐文章于 2024-07-23 22:27:37 发布

阅读量995

点赞数 1

分类专栏：移动端页面文章标签： jquery html5

本文链接：https://blog.csdn.net/jiangquhan/article/details/111945099

版权

本文介绍了如何使用Swiper和Anime这两个插件，结合Layui，在移动端创建一个可滑动点击的导航栏首页。开发者可以根据个人喜好调整样式，并注意到代码中包含注释，方便进行功能扩展。

摘要由CSDN通过智能技术生成

最近发现了swiper，anime 两个插件发现开发H5页面还蛮好用的，组合起来写了一个手机导航栏首页

<html lang="zh">
<head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
        <title>姜大侠</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script src="./swiper-3.4.2.jquery.min.js"></script>
        <link rel="stylesheet" href="./swiper-3.4.2.min.css">
        <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />
        <script src="./anime.min.js"></script>
</head>
<body>
<style>
        *{
   
                -webkit-text-size-adjust: none;
        }
        html,body{
    width: 100%; height: 100%;font-size: 12px; overflow: scroll;}
        html::-webkit-scrollbar, body::-webkit-scrollbar{
   width:0px;height:0px;}
        body{
   margin:0;}
        a {
   color: #3E3A3A;}
        .div-uo {
   
                text-align: center;
                line-height: 45px;
                background-color: #ffffff;
                font-size: 12px;
                /* border-radius: 118px; */
        }

        .cssp{
   
                transform: scale(1.2);
                color: #1E9FFF;
        }
        .swiper-divx div{
   
                margin-top: 20px;
        }
        body {
   
                background-color: rgba(90, 144, 255, 0.1);
        }
        .toapplyfor{
   
                background-color:#007bff;
                position: relative;
                border-radius: 100px;
                height: 50px;
                width: 50px;
                text-align: center;
                line-height: 50px;
                color: #fff;
                border: 1px solid;
        }
        .toappbutto{
   
                background-color: #007bff;
                position: relative;
                border-radius: 10px;
                height: 50px;
                width: 200px;
                text-align: center;
                line-height: 50px;
                color: #fff;
                margin-top: 40px;
                border: 1px solid;
        }
        .toapp{
   
                position: fixed;
                width: 100%;
                bottom: 100px;
                height: auto;
                z-index: 100;
                text-align: center;
                left: 40%;
                display: none;
        }
        .investment_con_list {
   
                display: none;
        }
        .tapbutton {
   
                background-color: #ffff;
                text-align: center;
                line-height: 40px;
                height: 40px;
        }
        .content {
   
                width: 100%;
                height: 400px;
                background-color: #FFFFFF;
                border-radius: 10px;
                box-shadow: