使用swiper和吸頂效果代碼

時間 2019-12-09

標籤使用 swiper 效果代碼简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <link rel="stylesheet" href="swiper.min.css">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="my-header">header</div>
    <div class="box">
        <div class="box2">
                <a href="#"></a>
        </div>
        <div class="box1">
                <div class="swiper-container">
                        <ul class="swiper-wrapper">
                        <!--這裏的li元素設置了swiper-slide類，其父元素必須設置swiper-container-->
                        <!--而後其爺爺元素必須設置爲swiper-container類，三者要挨着-->  
                                <li class="swiper-slide"><a href="###">所有1</a></li>
                                <li class="swiper-slide"><a href="###">所有2</a></li>
                                <li class="swiper-slide"><a href="###">所有3</a></li>
                                <li class="swiper-slide"><a href="###">所有4</a></li>
                                <li class="swiper-slide"><a href="###">所有5</a></li>
                                <li class="swiper-slide"><a href="###">所有6</a></li>
                                <li class="swiper-slide"><a href="###">所有7</a></li>
                                <li class="swiper-slide"><a href="###">所有8</a></li>
                                <li class="swiper-slide"><a href="###">所有9</a></li>
                                <li class="swiper-slide"><a href="###">所有10</a></li>
                                <li class="swiper-slide"><a href="###">所有11</a></li>
                                <li class="swiper-slide"><a href="###">所有12</a></li>
                        </ul>
                </div>

        </div>
    </div>

    <div class="content">
    <p>啦啦1</p><p>啦啦2</p><p>啦啦3</p><p>啦啦4</p><p>啦啦5</p><p>啦啦6</p>
    <p>啦啦7</p><p>啦啦8</p><p>啦啦9</p><p>啦啦10</p><p>啦啦11</p><p>啦啦12</p>
    <p>啦啦13</p><p>啦啦14</p><p>啦啦15</p><p>啦啦16</p><p>啦啦17</p><p>啦啦18</p>
    <p>啦啦19</p><p>啦啦20</p><p>啦啦21</p><p>啦啦22</p><p>啦啦23</p><p>啦啦24</p>
    <p>啦啦25</p><p>啦啦26</p><p>啦啦27</p><p>啦啦28</p><p>啦啦29</p><p>啦啦30</p>
    <p>啦啦31</p><p>啦啦32</p><p>啦啦33</p><p>啦啦34</p><p>啦啦35</p><p>啦啦36</p>
    p>啦啦19</p><p>啦啦20</p><p>啦啦21</p><p>啦啦22</p><p>啦啦23</p><p>啦啦24</p>
    <p>啦啦25</p><p>啦啦26</p><p>啦啦27</p><p>啦啦28</p><p>啦啦29</p><p>啦啦30</p>
    <p>啦啦31</p><p>啦啦32</p><p>啦啦33</p><p>啦啦34</p><p>啦啦35</p><p>啦啦36</p>
    </div>

<script type="text/javascript" src="jquery.js"></script>
<script src="swiper.min.js"></script>

<script language="javascript"> 
$(function(){

                 var mySwiper = new Swiper ('.swiper-container', {
                   
                   
                    slidesPerView:"auto",
                    
                  })        










   $(document).scroll(function(){

            var aa=$(window).scrollTop();
            console.log(aa);
            if(aa>300){
                    $(".box").css("position","fixed").css("top","0");
                   // $(".content").css("margin-top","100px");
                   $(".my-header").css("margin-bottom","100px");



            }else{

                     $(".box").css("position","").css("top","");
                   //  $(".content").css("margin-top","0");
                   $(".my-header").css("margin-bottom","0px");
            }



   });


})




</script>
</body>
</html>

相應的css文件：javascript

body,ul,li,p{

    margin:0px;
    padding:0px;
}
a{
    text-decoration: none;

}

.my-header{
width:100%;
height: 300px;
background-color: yellow;

}

.box{
    width:100%;
    height: 100px;
}
.box1{
    margin-right: 101px;
    height: 100px;
    background-color: #FFFFFF;
}
.box2{
    width:100px;
    height: 100px;
    background-color: green;
    float: right;
    background-image: url("images/more-1.jpg");
    background-size:cover;
    box-shadow: -5px 0px 4px #999;

}
.box1 ul{
    height: 100px;
    line-height: 100px;
    



}
.box1 ul li{
    float:left;
    list-style-type: none;
    margin:0 25px 0 10px;

    
    font-size:30px;


}
.box1 ul li a{
    text-decoration:none;

}

.content{
    width:100%;
    background-color: pink;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。