自己独立设计开发的一个fullpage+css3响应式页面

最新推荐文章于 2019-06-17 18:09:27 发布

weixin_34228617

最新推荐文章于 2019-06-17 18:09:27 发布

阅读量367

点赞数

文章标签：开发工具 javascript python ViewUI

原文链接：https://my.oschina.net/kitty0107/blog/1635637

版权

2019独角兽企业重金招聘Python工程师标准>>>

引入<meta name="viewport" content="width=device-width,initial-scale=1.0">

引入插件和库:

<script type="text/javascript" src="js/main.js"></script>
   <link rel="stylesheet" type="text/css" href="css/main.css">

$(function(){
   //1.设置fullpage颜色
   $(".main").fullpage({
       sectionsColor:["#1bbc9b","#1bbc9b","#1bbc9b","#1bbc9b","#1bbc9b","#1bbc9b"]
   });
   //2.背景音乐播放
   var audiobox=document.getElementById("audiobox");
   var audio=document.getElementById("audio");
   audiobox.οnclick=function(){
       if(audio.paused){
           audio.play();

       }else{

           audio.pause();
       }



   }
   //3.图片随机动起来

       setInterval(function(){
       var num=Math.floor(Math.random()*5+1);
       var n=$(".page4 .list").children("img").length-1;
       $(".page4 .list").append("<img src=''/>");
       $(".page4 .list img:eq("+n+")").attr("src","heart/"+Math.floor(Math.random()*5+1)+".png");


       var rand=Math.floor(Math.random()*900);
       $(".page4 .list img").animate({

           top:rand,
           left:rand,
           opacity:0,

       },3000);




       },300)

@media screen and (max-width:1750px){
       .page1 h1{
           margin: 100px auto;
       }

       .page1 .list{
           width: 80%;
           height:30%;
           margin-top: 0;

       }
       .page1 .list img{
           width: 19%;
           height: 30%;
       }
   }
   @media screen and (max-width:1678px){


       .page2 .list{
           width: 75%;
           height: 33%;

       }
       .page2 .list img{
           width: 32%;
           height: 55%;

       }
   }
   @media screen and (max-width:1207px){
       .page1 h1{
           margin: -50px auto;

       }
       .page1 .list{
           width: 85%;
           height: 30%;
}
       .page1 .list img{
           width: 19%;
           height: 45%;

}
.page3{
background-size:150%;

}
       .page3 .list{
           width: 89%;
}
       .page3 .list img{

           width: 22%;
           margin: 0 auto;
       }
   }
   @media screen and (max-width:1079px){

       .page1 .list img{
           width: 18%;

           margin: 100px auto;

       }
   }
   @media screen and (max-width:915px){

       .page2 h1{
           font-size: 30px;
           margin: 0px auto;
       }
       .page2 .bg{
           width: 80%;
           height: 25%;
           margin: 50px auto;
       }
       .page2 p{
           margin-top: 150px;

       }
       .page2 .list{
           width: 85%;
           height: 20%;
           margin-top:-100px;
       }
       .page2 .list img{

           width: 31%;
           height: 50%;
           margin: 50px auto;
       }

   }
   @media screen and (max-width: 883px){
       .page1 p{
           font-size: 20px;
       }
       .page3{
           background-size: 200%;
       }

       .page3 .list img{
           width: 20%;
           height: 65%;
       }
   }
   @media screen and (max-width: 749px){
       .page1 h1{
           font-size: 20px;
       }
       .page1 p{
           font-size: 15px;
       }
       .page1 .bg{
           width: 75%;
       }
       .page2 p{
           font-size: 15px;
       }
       .page3{
           background-size: 250%;
       }
       .page4 h1{
           font-size: 35px;

       }
       .page4 {
           background-size:auto auto;
       }
       @media screen and (max-width: 687px){
           .page1 .bg, .page2 .bg, .page4 .list{
               border: 0px;
           }
           .page1 .bg img,.page2 .bg img{
               width: 100%;
               height: 80%;

}
.page1 .left, .page1 .right{

               width: 30%;
               height: 15%;
           }
       }
           .page2 h1{
           margin-top:-250px;
       }
           .page2 .left, .page2 .right{

               width: 30%;
               height: 15%;
           }
           .page3{
               background-size: 280%;
           }
           .page3 h1{
               font-size: 30px;
           }
           .page3 .list{
               margin-top: 100px;

           }
           .page3 .list img{
               width: 18%;
               height: 35%;
           }
           .page4 .list{
               width: 60%;
               height: 30%;
           }

       @media screen and (max-width: 563px){
           .page1{
               margin-top: 0;
           }
           .page1 p{
               margin-top: 50px;

           }
           .page1 .list{

               width: 90%;
               height: 10%;
           }
           .page1 .list img{
               margin-top: 0;
           }
       }
       @media screen and (max-width: 535px){
           .page1{
               margin-top: ;

           }
           .page1 p, .page2 p{
               display: none;
           }

           .page1 .list img{
               width: 17%;
           }

   }
       @media screen and (max-width: 463px){
           .page2 .list img{
               width: 28%;
           }

       }
       @media screen and (max-width: 414px){
           .page1 .list{
               margin-top: -50px;
           }
           .page2 .list{
               margin-left: 50px;
               margin-top: 50px;
           }
       }
       @media screen and (max-width: 375px){
           .page3 .list{
               margin-left: 35px;
           }
           .page3 .list img{
               width: 15%;
           }
       }
       @media screen and (max-width: 360px){
           .page1{
               margin-top: -100px;
           }
           .page1 .bg{
               width: 45%;
               height: 15%;
           }
           .page1 .list img{
               width: 15%;
           }
           .page2, .page3{
               margin-top: 100px;
           }
           .page3 .list img{
               width: 15%;
           }

   }
   @media screen and (max-width: 320px){
       .page1 .list{
           margin-top:150px;
           margin-left: 30px;
       }
       .page2 h1{
           font-size: 15px;
       }

       .page2 .list{
           margin-top: 0;
           margin-left: 30px;
       }
       .page4 h1{
           font-size: 15px;
       }
       .page4{
           margin-top: 100px;
       }
   }

</style>

<div class="main">
       <div class="section page1">
           <h1>Internet changes our life</h1>
           <div class="bg">
               <img class="bg_img" src="img/diversification.jpg"/>
           </div>

           <p class="left">
               <p class="left p1"> Wifi together with us</p>
               <p class="left p2"> Wifi together with us</p>
               <p class="left p3"> Wifi together with us</p>
               <p class="left p4"> Wifi together with us</p>
               <p class="left p5"> Wifi together with us</p>
           </p>
           <p class="right">
               <p class="right p1"> 4G times already go</p>
               <p class="right p2"> 4G times already go</p>
               <p class="right p3"> 4G times already go</p>
               <p class="right p4"> 4G times already go</p>
               <p class="right p5"> 4G times already go</p>
           </p>
           <div class="list">

               <img src="img/search.jpg">
               <img src="img/phone2.jpg">
               <img src="img/connection1.jpg">
               <img src="img/wifi1.jpg">
               <img src="img/success.jpg">
           </div>
       </div>
       <div class="section page2">
           <h1>We work we run and we achieve success</h1>
           <div class="bg">
               <img src="img/Internet.jpg">
           </div>
           <p class="left">
               <p class="left p1"> Wifi together with us</p>
               <p class="left p2"> Wifi together with us</p>
               <p class="left p3"> Wifi together with us</p>
               <p class="left p4"> Wifi together with us</p>
               <p class="left p5"> Wifi together with us</p>
           </p>
           <p class="right">
               <p class="right p1"> 4G times already go</p>
               <p class="right p2"> 4G times already go</p>
               <p class="right p3"> 4G times already go</p>
               <p class="right p4"> 4G times already go</p>
               <p class="right p5"> 4G times already go</p>
           </p>
           <div class="list">

               <img src="img/person.jpg">
               <img src="img/running.jpg">
               <img src="img/success.jpg">
           </div>
       </div>
       <div class="section page3">
           <h1>Internet changes our life</h1>

           <div class="list">
               <img src="img/password.jpg">
               <img src="img/chain.jpg">
               <img src="img/pan.jpg">
               <img src="img/yangwang.jpg">
           </div>
       </div>
       <div class="section page4">
           <h1>Face the future and hug our dream</h1>
           <div class="list">
           </div>
       </div>
   </div>
   <div id="audiobox">
       <audio id="audio" autoplay loop src="music/future.mp3"></audio>

   </div>